diff --git a/.eslintrc.js b/.eslintrc.js
index 3fc301226d5..817d5f021ed 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -34,7 +34,7 @@ module.exports = {
     'compat/compat': 'error',
     'comma-dangle': ['error', 'always-multiline'],
     // 'prettier/prettier': 0,
-    'react/boolean-prop-naming': 'error',
+    'react/boolean-prop-naming': ['error', { rule: '^(is|has|will|(.*)On)[A-Z]([A-Za-z0-9]?)+' }],
     'react/forbid-prop-types': 0,
     'react-hooks/rules-of-hooks': 'error',
     'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx'] }],
diff --git a/app/components/Activity/Activity.js b/app/components/Activity/Activity.js
index 55bdae47851..e20e75c444a 100644
--- a/app/components/Activity/Activity.js
+++ b/app/components/Activity/Activity.js
@@ -18,7 +18,7 @@ const StyledList = styled(List)`
 class Activity extends Component {
   cache = new CellMeasurerCache({
     fixedWidth: true,
-    minHeight: 52
+    minHeight: 52,
   })
 
   componentDidUpdate() {
@@ -49,12 +49,12 @@ class Activity extends Component {
     const renderRow = ({ index, key, style, parent }) => {
       const item = currentActivity[index]
       return (
-        <CellMeasurer key={key} cache={this.cache} parent={parent} columnIndex={0} rowIndex={index}>
+        <CellMeasurer key={key} cache={this.cache} columnIndex={0} parent={parent} rowIndex={index}>
           <div style={style}>
             {item.title ? (
-              <Box pl={4} mt={4}>
+              <Box mt={4} pl={4}>
                 <Heading.h4 fontWeight="normal">
-                  <FormattedDate day="2-digit" month="short" year="numeric" value={item.title} />
+                  <FormattedDate day="2-digit" month="short" value={item.title} year="numeric" />
                 </Heading.h4>
                 <Bar my={1} />
               </Box>
@@ -65,7 +65,7 @@ class Activity extends Component {
                   currencyName,
                   currentTicker,
                   showActivityModal,
-                  ticker
+                  ticker,
                 }}
               />
             )}
@@ -78,14 +78,14 @@ class Activity extends Component {
         {({ width, height }) => {
           return (
             <StyledList
-              pr={4}
               ref={ref => (this._list = ref)}
-              width={width}
+              deferredMeasurementCache={this.cache}
               height={height}
+              pr={4}
+              rowCount={currentActivity.length}
               rowHeight={this.cache.rowHeight}
               rowRenderer={renderRow}
-              rowCount={currentActivity.length}
-              deferredMeasurementCache={this.cache}
+              width={width}
             />
           )
         }}
@@ -113,13 +113,13 @@ class Activity extends Component {
 }
 
 Activity.propTypes = {
-  intl: intlShape.isRequired,
   activity: PropTypes.object.isRequired,
-  currentActivity: PropTypes.array.isRequired,
   currencyName: PropTypes.string,
+  currentActivity: PropTypes.array.isRequired,
   currentTicker: PropTypes.object,
+  intl: intlShape.isRequired,
+  showActivityModal: PropTypes.func.isRequired,
   ticker: PropTypes.object.isRequired,
-  showActivityModal: PropTypes.func.isRequired
 }
 
 export default injectIntl(Activity)
diff --git a/app/components/Activity/ActivityActions/ActivityActions.js b/app/components/Activity/ActivityActions/ActivityActions.js
index c567fe33637..137ce6bc112 100644
--- a/app/components/Activity/ActivityActions/ActivityActions.js
+++ b/app/components/Activity/ActivityActions/ActivityActions.js
@@ -18,36 +18,36 @@ const ActivityActions = ({
   intl,
   ...rest
 }) => (
-  <Flex as="nav" alignItems="center" {...rest}>
+  <Flex alignItems="center" as="nav" {...rest}>
     <ActivitySearch
-      width={13 / 16}
       placeholder={intl.formatMessage({ ...messages.search_placeholder })}
       searchQuery={searchQuery}
       updateActivitySearchQuery={updateActivitySearchQuery}
+      width={13 / 16}
     />
 
     <ActivityFilter
-      width={2.5 / 16}
+      changeFilter={changeFilter}
       filter={filter}
       filters={filters}
-      changeFilter={changeFilter}
       mr={1}
+      width={2.5 / 16}
     />
 
-    <Flex as="section" alignItems="center" ml={3}>
+    <Flex alignItems="center" as="section" ml={3}>
       <ActivityRefresh onClick={fetchActivityHistory} />
     </Flex>
   </Flex>
 )
 
 ActivityActions.propTypes = {
+  changeFilter: PropTypes.func.isRequired,
+  fetchActivityHistory: PropTypes.func.isRequired,
   filter: PropTypes.string.isRequired,
   filters: PropTypes.array.isRequired,
   intl: intlShape.isRequired,
   searchQuery: PropTypes.string,
-  changeFilter: PropTypes.func.isRequired,
-  fetchActivityHistory: PropTypes.func.isRequired,
-  updateActivitySearchQuery: PropTypes.func.isRequired
+  updateActivitySearchQuery: PropTypes.func.isRequired,
 }
 
 export default injectIntl(ActivityActions)
diff --git a/app/components/Activity/ActivityActions/ActivityFilter.js b/app/components/Activity/ActivityActions/ActivityFilter.js
index 4cfe773fc17..a01f77e48df 100644
--- a/app/components/Activity/ActivityActions/ActivityFilter.js
+++ b/app/components/Activity/ActivityActions/ActivityFilter.js
@@ -7,7 +7,7 @@ const ActivityFilter = ({ changeFilter, filter, filters, ...rest }) => {
   const items = filters.map(f => {
     return {
       key: f.key,
-      value: f.name
+      value: f.name,
     }
   })
 
@@ -15,11 +15,11 @@ const ActivityFilter = ({ changeFilter, filter, filters, ...rest }) => {
     <Form {...rest}>
       <Select
         field="activity-filter"
+        highlightOnValid={false}
         id="activity-filter"
-        items={items}
         initialSelectedItem={filter}
+        items={items}
         onValueSelected={changeFilter}
-        highlightOnValid={false}
       />
     </Form>
   )
@@ -28,11 +28,11 @@ const ActivityFilter = ({ changeFilter, filter, filters, ...rest }) => {
 ActivityFilter.propTypes = {
   changeFilter: PropTypes.func.isRequired,
   filter: PropTypes.string,
-  filters: PropTypes.array
+  filters: PropTypes.array,
 }
 
 ActivityFilter.defaultProps = {
-  filters: []
+  filters: [],
 }
 
 export default ActivityFilter
diff --git a/app/components/Activity/ActivityActions/ActivityRefresh.js b/app/components/Activity/ActivityActions/ActivityRefresh.js
index 00cc1a866cc..4060b432913 100644
--- a/app/components/Activity/ActivityActions/ActivityRefresh.js
+++ b/app/components/Activity/ActivityActions/ActivityRefresh.js
@@ -14,7 +14,7 @@ const StyledButton = styled(Button)`
   }
 `
 StyledButton.propTypes = {
-  active: PropTypes.bool
+  active: PropTypes.bool,
 }
 
 const ActivityRefresh = injectIntl(({ intl, onClick, ...rest }) => {
@@ -41,13 +41,13 @@ const ActivityRefresh = injectIntl(({ intl, onClick, ...rest }) => {
 
   return (
     <StyledButton
-      variant="secondary"
-      size="small"
-      active={status === 'fetching'}
-      onClick={handleClick}
       ref={buttonRef}
+      active={status === 'fetching'}
       className="hint--bottom-left"
       data-hint={intl.formatMessage({ ...messages.refresh_button_hint })}
+      onClick={handleClick}
+      size="small"
+      variant="secondary"
       {...rest}
     >
       {status === 'fetching' ? <Spinner /> : <Sync height="16px" width="16px" />}
@@ -56,7 +56,7 @@ const ActivityRefresh = injectIntl(({ intl, onClick, ...rest }) => {
 })
 
 ActivityRefresh.propTypes = {
-  onClick: PropTypes.func.isRequired
+  onClick: PropTypes.func.isRequired,
 }
 
 export default ActivityRefresh
diff --git a/app/components/Activity/ActivityActions/ActivitySearch.js b/app/components/Activity/ActivityActions/ActivitySearch.js
index 08029aa8a6b..b2d1f3ad5ac 100644
--- a/app/components/Activity/ActivityActions/ActivitySearch.js
+++ b/app/components/Activity/ActivityActions/ActivitySearch.js
@@ -11,22 +11,22 @@ const ActivitySearch = ({ searchQuery, placeholder, updateActivitySearchQuery, .
     <Form {...rest}>
       <Input
         field="activity-search"
+        highlightOnValid={false}
         id="activity-search"
-        type="search"
-        placeholder={placeholder}
         initialValue={searchQuery}
-        onValueChange={setValue}
-        highlightOnValid={false}
         mr={2}
+        onValueChange={setValue}
+        placeholder={placeholder}
+        type="search"
       />
     </Form>
   )
 }
 
 ActivitySearch.propTypes = {
-  searchQuery: PropTypes.string,
   placeholder: PropTypes.string.isRequired,
-  updateActivitySearchQuery: PropTypes.func.isRequired
+  searchQuery: PropTypes.string,
+  updateActivitySearchQuery: PropTypes.func.isRequired,
 }
 
 export default ActivitySearch
diff --git a/app/components/Activity/ActivityActions/messages.js b/app/components/Activity/ActivityActions/messages.js
index 5744b1b79d6..1722002f37f 100644
--- a/app/components/Activity/ActivityActions/messages.js
+++ b/app/components/Activity/ActivityActions/messages.js
@@ -3,5 +3,5 @@ import { defineMessages } from 'react-intl'
 /* eslint-disable max-len */
 export default defineMessages({
   search_placeholder: 'Search Activity',
-  refresh_button_hint: 'Refresh activity list'
+  refresh_button_hint: 'Refresh activity list',
 })
diff --git a/app/components/Activity/ActivityListItem.js b/app/components/Activity/ActivityListItem.js
index 6e823710f53..7964939a326 100644
--- a/app/components/Activity/ActivityListItem.js
+++ b/app/components/Activity/ActivityListItem.js
@@ -11,7 +11,7 @@ import Clock from 'components/Icon/Clock'
 import Zap from 'components/Icon/Zap'
 import { Text } from 'components/UI'
 
-const ZapIcon = () => <Zap width="1.6em" height="1.6em" />
+const ZapIcon = () => <Zap height="1.6em" width="1.6em" />
 
 const ActivityIcon = ({ activity }) => {
   switch (activity.type) {
@@ -27,26 +27,26 @@ const ActivityIcon = ({ activity }) => {
 }
 
 ActivityIcon.propTypes = {
-  activity: PropTypes.object.isRequired
+  activity: PropTypes.object.isRequired,
 }
 
 export default class ActivityListItem extends PureComponent {
   static propTypes = {
+    activity: PropTypes.object.isRequired,
+    currencyName: PropTypes.string,
     currentTicker: PropTypes.object,
     showActivityModal: PropTypes.func.isRequired,
-    currencyName: PropTypes.string,
     ticker: PropTypes.object.isRequired,
-    activity: PropTypes.object.isRequired
   }
 
   render() {
     const { activity, currencyName, currentTicker, ticker, showActivityModal, ...rest } = this.props
     return (
-      <Flex justifyContent="space-between" alignItems="center" {...rest}>
-        <Text width={24} color="gray" textAlign="center" mr={10}>
+      <Flex alignItems="center" justifyContent="space-between" {...rest}>
+        <Text color="gray" mr={10} textAlign="center" width={24}>
           <ActivityIcon activity={activity} />
         </Text>
-        <Box width={1} css={!activity.sending ? { cursor: 'pointer' } : null}>
+        <Box css={activity.sending ? null : { cursor: 'pointer' }} width={1}>
           {activity.type === 'transaction' && <Transaction transaction={activity} />}
           {activity.type === 'invoice' && <Invoice invoice={activity} />}
           {activity.type === 'payment' && <Payment payment={activity} />}
diff --git a/app/components/Activity/ActivityModal/ActivityModal.js b/app/components/Activity/ActivityModal/ActivityModal.js
index f29ac28d7b3..1bf1f8eb628 100644
--- a/app/components/Activity/ActivityModal/ActivityModal.js
+++ b/app/components/Activity/ActivityModal/ActivityModal.js
@@ -10,9 +10,9 @@ export default class ActivityModal extends React.PureComponent {
     item: PropTypes.object,
     networkInfo: PropTypes.shape({
       id: PropTypes.string,
-      name: PropTypes.string
+      name: PropTypes.string,
     }),
-    showNotification: PropTypes.func.isRequired
+    showNotification: PropTypes.func.isRequired,
   }
 
   render() {
@@ -25,16 +25,16 @@ export default class ActivityModal extends React.PureComponent {
     const MODAL_COMPONENTS = {
       transaction: {
         component: TransactionModal,
-        props: { item, networkInfo }
+        props: { item, networkInfo },
       },
       payment: {
         component: PaymentModal,
-        props: { item }
+        props: { item },
       },
       invoice: {
         component: InvoiceModal,
-        props: { item, showNotification }
-      }
+        props: { item, showNotification },
+      },
     }
 
     const SpecificModal = MODAL_COMPONENTS[item.type].component
diff --git a/app/components/Activity/Invoice/Invoice.js b/app/components/Activity/Invoice/Invoice.js
index 7bd1d2ef869..49326fbb276 100644
--- a/app/components/Activity/Invoice/Invoice.js
+++ b/app/components/Activity/Invoice/Invoice.js
@@ -8,15 +8,15 @@ import messages from './messages'
 
 const Invoice = ({ invoice, showActivityModal, currencyName, intl }) => (
   <Flex
-    justifyContent="space-between"
     alignItems="center"
+    justifyContent="space-between"
     onClick={() => showActivityModal('INVOICE', invoice.payment_request)}
     py={2}
   >
     <Box
-      width={3 / 4}
       className="hint--top-right"
       data-hint={intl.formatMessage({ ...messages[invoice.settled ? 'type_paid' : 'type_unpaid'] })}
+      width={3 / 4}
     >
       <Text mb={1}>
         <FormattedMessage {...messages[invoice.settled ? 'received' : 'requested']} />
@@ -29,27 +29,27 @@ const Invoice = ({ invoice, showActivityModal, currencyName, intl }) => (
     </Box>
 
     <Box
-      width={1 / 4}
       className="hint--top-left"
       data-hint={intl.formatMessage({ ...messages.amount })}
+      width={1 / 4}
     >
-      <Text mb={1} textAlign="right" color="superGreen">
+      <Text color="superGreen" mb={1} textAlign="right">
         {'+ '}
         <CryptoValue value={invoice.value} />
         <i> {currencyName}</i>
       </Text>
-      <Text textAlign="right" color="gray" fontSize="xs" fontWeight="normal">
-        <FiatValue value={invoice.value} style="currency" />
+      <Text color="gray" fontSize="xs" fontWeight="normal" textAlign="right">
+        <FiatValue style="currency" value={invoice.value} />
       </Text>
     </Box>
   </Flex>
 )
 
 Invoice.propTypes = {
+  currencyName: PropTypes.string.isRequired,
   intl: intlShape.isRequired,
   invoice: PropTypes.object.isRequired,
   showActivityModal: PropTypes.func.isRequired,
-  currencyName: PropTypes.string.isRequired
 }
 
 export default injectIntl(Invoice)
diff --git a/app/components/Activity/Invoice/messages.js b/app/components/Activity/Invoice/messages.js
index a53205fd911..31b2b7dcbc0 100644
--- a/app/components/Activity/Invoice/messages.js
+++ b/app/components/Activity/Invoice/messages.js
@@ -6,5 +6,5 @@ export default defineMessages({
   requested: 'Requested payment',
   type_paid: 'Lightning invoice (paid)',
   type_unpaid: 'Lightning invoice (unpaid)',
-  amount: 'Invoice amount'
+  amount: 'Invoice amount',
 })
diff --git a/app/components/Activity/InvoiceModal/InvoiceModal.js b/app/components/Activity/InvoiceModal/InvoiceModal.js
index 19326dcbac6..a5725f903b2 100644
--- a/app/components/Activity/InvoiceModal/InvoiceModal.js
+++ b/app/components/Activity/InvoiceModal/InvoiceModal.js
@@ -11,7 +11,7 @@ export default class InvoiceModal extends React.PureComponent {
     /** Invoice */
     item: PropTypes.object.isRequired,
     /** Show a notification. */
-    showNotification: PropTypes.func.isRequired
+    showNotification: PropTypes.func.isRequired,
   }
 
   render() {
@@ -21,13 +21,13 @@ export default class InvoiceModal extends React.PureComponent {
       <Panel {...rest}>
         <Panel.Header>
           <Header
+            logo={<Lightning height="45px" width="45px" />}
+            subtitle={<FormattedMessage {...messages.subtitle} />}
             title={
               <FormattedMessage
                 {...messages[item.settled ? 'title_received' : 'title_requested']}
               />
             }
-            subtitle={<FormattedMessage {...messages.subtitle} />}
-            logo={<Lightning height="45px" width="45px" />}
           />
           <Bar mt={2} />
         </Panel.Header>
diff --git a/app/components/Activity/InvoiceModal/messages.js b/app/components/Activity/InvoiceModal/messages.js
index a3693aba092..5613f7747aa 100644
--- a/app/components/Activity/InvoiceModal/messages.js
+++ b/app/components/Activity/InvoiceModal/messages.js
@@ -12,5 +12,5 @@ export default defineMessages({
   status: 'Status',
   not_paid: 'Not Paid',
   paid: 'Paid',
-  current_value: 'Current value'
+  current_value: 'Current value',
 })
diff --git a/app/components/Activity/Payment/Payment.js b/app/components/Activity/Payment/Payment.js
index e212943f758..5546a25b6c4 100644
--- a/app/components/Activity/Payment/Payment.js
+++ b/app/components/Activity/Payment/Payment.js
@@ -17,15 +17,15 @@ const Payment = ({ payment, showActivityModal, nodes, currencyName, intl }) => {
 
   return (
     <Flex
-      justifyContent="space-between"
       alignItems="center"
-      onClick={!payment.sending ? () => showActivityModal('PAYMENT', payment.payment_hash) : null}
+      justifyContent="space-between"
+      onClick={payment.sending ? null : () => showActivityModal('PAYMENT', payment.payment_hash)}
       py={2}
     >
       <Box
-        width={3 / 4}
         className="hint--top-right"
         data-hint={intl.formatMessage({ ...messages.type })}
+        width={3 / 4}
       >
         <Text mb={1}>{displayNodeName(payment.path[payment.path.length - 1])}</Text>
         {payment.sending ? (
@@ -56,9 +56,9 @@ const Payment = ({ payment, showActivityModal, nodes, currencyName, intl }) => {
       </Box>
 
       <Box
-        width={1 / 4}
         className="hint--top-left"
         data-hint={intl.formatMessage({ ...messages.amount })}
+        width={1 / 4}
       >
         <Box css={payment.status == 'failed' ? { opacity: 0.3 } : null}>
           <Text mb={1} textAlign="right">
@@ -66,8 +66,8 @@ const Payment = ({ payment, showActivityModal, nodes, currencyName, intl }) => {
             <CryptoValue value={payment.value} />
             <i> {currencyName}</i>
           </Text>
-          <Text textAlign="right" color="gray" fontSize="xs" fontWeight="normal">
-            <FiatValue value={payment.value} style="currency" />
+          <Text color="gray" fontSize="xs" fontWeight="normal" textAlign="right">
+            <FiatValue style="currency" value={payment.value} />
           </Text>
         </Box>
       </Box>
@@ -77,10 +77,10 @@ const Payment = ({ payment, showActivityModal, nodes, currencyName, intl }) => {
 
 Payment.propTypes = {
   currencyName: PropTypes.string.isRequired,
-  payment: PropTypes.object.isRequired,
+  intl: intlShape.isRequired,
   nodes: PropTypes.array.isRequired,
+  payment: PropTypes.object.isRequired,
   showActivityModal: PropTypes.func.isRequired,
-  intl: intlShape.isRequired
 }
 
 export default injectIntl(Payment)
diff --git a/app/components/Activity/Payment/messages.js b/app/components/Activity/Payment/messages.js
index 70129c6a6dd..ef0f05a41d6 100644
--- a/app/components/Activity/Payment/messages.js
+++ b/app/components/Activity/Payment/messages.js
@@ -7,5 +7,5 @@ export default defineMessages({
   type: 'Lightning payment',
   status_processing: 'Zap is processing your payment. This can take up to 01:00 min.',
   status_success: 'Your payment was successful.',
-  status_error: 'There was a problem sending your payment.'
+  status_error: 'There was a problem sending your payment.',
 })
diff --git a/app/components/Activity/PaymentModal/PaymentModal.js b/app/components/Activity/PaymentModal/PaymentModal.js
index 3184ec5302e..98ec00981f1 100644
--- a/app/components/Activity/PaymentModal/PaymentModal.js
+++ b/app/components/Activity/PaymentModal/PaymentModal.js
@@ -10,7 +10,7 @@ import messages from './messages'
 
 export default class PaymentModal extends React.PureComponent {
   static propTypes = {
-    item: PropTypes.object.isRequired
+    item: PropTypes.object.isRequired,
   }
 
   render() {
@@ -19,9 +19,9 @@ export default class PaymentModal extends React.PureComponent {
       <Panel {...rest}>
         <Panel.Header>
           <Header
-            title={<FormattedMessage {...messages.title_sent} />}
-            subtitle={<FormattedMessage {...messages.subtitle} />}
             logo={<Lightning height="45px" width="45px" />}
+            subtitle={<FormattedMessage {...messages.subtitle} />}
+            title={<FormattedMessage {...messages.title_sent} />}
           />
           <Bar mt={2} />
         </Panel.Header>
@@ -32,7 +32,7 @@ export default class PaymentModal extends React.PureComponent {
             right={
               <Flex alignItems="center">
                 <CryptoSelector mr={2} />
-                <CryptoValue value={item.value} fontSize="xxl" />
+                <CryptoValue fontSize="xxl" value={item.value} />
               </Flex>
             }
           />
@@ -56,10 +56,10 @@ export default class PaymentModal extends React.PureComponent {
             right={
               <>
                 <FormattedDate
+                  day="2-digit"
+                  month="long"
                   value={item.creation_date * 1000}
                   year="numeric"
-                  month="long"
-                  day="2-digit"
                 />
                 <br />
                 <FormattedTime value={item.creation_date * 1000} />
diff --git a/app/components/Activity/PaymentModal/messages.js b/app/components/Activity/PaymentModal/messages.js
index 7eeacf27291..780da58c020 100644
--- a/app/components/Activity/PaymentModal/messages.js
+++ b/app/components/Activity/PaymentModal/messages.js
@@ -7,5 +7,5 @@ export default defineMessages({
   date_sent: 'Date sent',
   fee: 'Total fee',
   current_value: 'Current value',
-  preimage: 'Payment Preimage'
+  preimage: 'Payment Preimage',
 })
diff --git a/app/components/Activity/Transaction/Transaction.js b/app/components/Activity/Transaction/Transaction.js
index 8ff01702ae8..90924a22eae 100644
--- a/app/components/Activity/Transaction/Transaction.js
+++ b/app/components/Activity/Transaction/Transaction.js
@@ -18,17 +18,17 @@ const Transaction = ({ transaction, showActivityModal, currencyName, intl }) =>
 
   return (
     <Flex
-      justifyContent="space-between"
       alignItems="center"
+      justifyContent="space-between"
       onClick={
-        !transaction.sending ? () => showActivityModal('TRANSACTION', transaction.tx_hash) : null
+        transaction.sending ? null : () => showActivityModal('TRANSACTION', transaction.tx_hash)
       }
       py={2}
     >
       <Box
-        width={3 / 4}
         className="hint--top-right"
         data-hint={intl.formatMessage({ ...messages.type })}
+        width={3 / 4}
       >
         <Text mb={1}>
           {transaction.closeType ? (
@@ -64,18 +64,18 @@ const Transaction = ({ transaction, showActivityModal, currencyName, intl }) =>
       </Box>
 
       <Box
-        width={1 / 4}
         className="hint--top-left"
         data-hint={intl.formatMessage({ ...messages.amount })}
+        width={1 / 4}
       >
         <Box css={transaction.status == 'failed' ? { opacity: 0.2 } : null}>
-          <Text mb={1} textAlign="right" color={isIncoming ? 'superGreen' : null}>
+          <Text color={isIncoming ? 'superGreen' : null} mb={1} textAlign="right">
             {isIncoming ? `+ ` : `- `}
             <CryptoValue value={amount} />
             <i> {currencyName}</i>
           </Text>
-          <Text textAlign="right" color="gray" fontSize="xs" fontWeight="normal">
-            <FiatValue value={amount} style="currency" />
+          <Text color="gray" fontSize="xs" fontWeight="normal" textAlign="right">
+            <FiatValue style="currency" value={amount} />
           </Text>
         </Box>
       </Box>
@@ -84,10 +84,10 @@ const Transaction = ({ transaction, showActivityModal, currencyName, intl }) =>
 }
 
 Transaction.propTypes = {
+  currencyName: PropTypes.string.isRequired,
   intl: intlShape.isRequired,
-  transaction: PropTypes.object.isRequired,
   showActivityModal: PropTypes.func.isRequired,
-  currencyName: PropTypes.string.isRequired
+  transaction: PropTypes.object.isRequired,
 }
 
 export default injectIntl(Transaction)
diff --git a/app/components/Activity/Transaction/messages.js b/app/components/Activity/Transaction/messages.js
index f84dc4c7cfa..f772f544164 100644
--- a/app/components/Activity/Transaction/messages.js
+++ b/app/components/Activity/Transaction/messages.js
@@ -17,5 +17,5 @@ export default defineMessages({
   closetype_remote_force_close: 'Remote force close',
   closetype_breach_close: 'Breach',
   closetype_funding_canceled: 'Funding Canceled',
-  closetype_abandoned: 'Abandoned'
+  closetype_abandoned: 'Abandoned',
 })
diff --git a/app/components/Activity/TransactionModal/TransactionModal.js b/app/components/Activity/TransactionModal/TransactionModal.js
index 854f51677b1..3acd01f126d 100644
--- a/app/components/Activity/TransactionModal/TransactionModal.js
+++ b/app/components/Activity/TransactionModal/TransactionModal.js
@@ -16,8 +16,8 @@ export default class TransactionModal extends React.PureComponent {
     item: PropTypes.object.isRequired,
     networkInfo: PropTypes.shape({
       id: PropTypes.string,
-      name: PropTypes.string
-    })
+      name: PropTypes.string,
+    }),
   }
 
   showBlock = hash => {
@@ -45,9 +45,9 @@ export default class TransactionModal extends React.PureComponent {
       <Panel {...rest}>
         <Panel.Header>
           <Header
-            title={<FormattedMessage {...messages[isIncoming ? 'title_received' : 'title_sent']} />}
-            subtitle={<FormattedMessage {...messages.subtitle} />}
             logo={<Onchain height="45px" width="45px" />}
+            subtitle={<FormattedMessage {...messages.subtitle} />}
+            title={<FormattedMessage {...messages[isIncoming ? 'title_received' : 'title_sent']} />}
           />
           <Bar mt={2} />
         </Panel.Header>
@@ -58,7 +58,7 @@ export default class TransactionModal extends React.PureComponent {
             right={
               <Flex alignItems="center">
                 <CryptoSelector mr={2} />
-                <CryptoValue value={amount} fontSize="xxl" />
+                <CryptoValue fontSize="xxl" value={amount} />
               </Flex>
             }
           />
@@ -86,10 +86,10 @@ export default class TransactionModal extends React.PureComponent {
                     <>
                       <Text>
                         <FormattedDate
+                          day="2-digit"
+                          month="long"
                           value={item.time_stamp * 1000}
                           year="numeric"
-                          month="long"
-                          day="2-digit"
                         />
                       </Text>
                       <Text>
@@ -160,7 +160,7 @@ export default class TransactionModal extends React.PureComponent {
                   </Link>
 
                   {item.maturityHeight && (
-                    <Flex mt={1} alignItems="center">
+                    <Flex alignItems="center" mt={1}>
                       <Span color="gray" fontSize="s" mr={1}>
                         <Padlock />
                       </Span>
diff --git a/app/components/Activity/TransactionModal/messages.js b/app/components/Activity/TransactionModal/messages.js
index cec1652e982..0fb8bc69374 100644
--- a/app/components/Activity/TransactionModal/messages.js
+++ b/app/components/Activity/TransactionModal/messages.js
@@ -14,5 +14,5 @@ export default defineMessages({
   block_height: 'Confirmed in block {height}',
   maturity_height: 'Locked until block {height} ',
   tx_hash: 'Transaction ID',
-  unconfirmed: 'Unconfirmed'
+  unconfirmed: 'Unconfirmed',
 })
diff --git a/app/components/Activity/messages.js b/app/components/Activity/messages.js
index 424924c81ef..a1a68f11397 100644
--- a/app/components/Activity/messages.js
+++ b/app/components/Activity/messages.js
@@ -7,5 +7,5 @@ export default defineMessages({
   requested: 'Received',
   pending: 'Pending',
   expired: 'Expired',
-  internal: 'Internal'
+  internal: 'Internal',
 })
diff --git a/app/components/App/App.js b/app/components/App/App.js
index 28748f8ea84..a068f794951 100644
--- a/app/components/App/App.js
+++ b/app/components/App/App.js
@@ -51,10 +51,10 @@ function App({ fetchActivityHistory, setIsWalletOpen, fetchPeers, fetchTransacti
 }
 
 App.propTypes = {
-  setIsWalletOpen: PropTypes.func.isRequired,
-  fetchTransactions: PropTypes.func.isRequired,
+  fetchActivityHistory: PropTypes.func.isRequired,
   fetchPeers: PropTypes.func.isRequired,
-  fetchActivityHistory: PropTypes.func.isRequired
+  fetchTransactions: PropTypes.func.isRequired,
+  setIsWalletOpen: PropTypes.func.isRequired,
 }
 
 export default App
diff --git a/app/components/Channels/ChannelBalance.js b/app/components/Channels/ChannelBalance.js
index b63ec96f9bc..a8e4e158d13 100644
--- a/app/components/Channels/ChannelBalance.js
+++ b/app/components/Channels/ChannelBalance.js
@@ -8,7 +8,7 @@ import messages from './messages'
 
 const ChannelBalance = ({ channelBalance, ...rest }) => {
   return (
-    <Flex as="section" alignItems="center" {...rest}>
+    <Flex alignItems="center" as="section" {...rest}>
       <Text fontWeight="normal" mr={2}>
         <FormattedMessage {...messages.total_capacity} />
       </Text>
@@ -19,7 +19,7 @@ const ChannelBalance = ({ channelBalance, ...rest }) => {
 }
 
 ChannelBalance.propTypes = {
-  channelBalance: PropTypes.number.isRequired
+  channelBalance: PropTypes.number.isRequired,
 }
 
 export default ChannelBalance
diff --git a/app/components/Channels/ChannelCapacity.js b/app/components/Channels/ChannelCapacity.js
index 0c622c63394..0dbcb7bde38 100644
--- a/app/components/Channels/ChannelCapacity.js
+++ b/app/components/Channels/ChannelCapacity.js
@@ -19,48 +19,48 @@ const ChannelCapacity = ({ localBalance, remoteBalance, opacity, ...rest }) => {
 
   return (
     <Card as="article" {...rest}>
-      <Flex as="header" justifyContent="space-between" alignItems="center" opacity={opacity}>
+      <Flex alignItems="center" as="header" justifyContent="space-between" opacity={opacity}>
         <Text width={1 / 3}>
           <Heading.h4 fontWeight="normal">
             <FormattedMessage {...messages.local_balance} />
           </Heading.h4>
         </Text>
-        <Text width={1 / 3} textAlign="center">
+        <Text textAlign="center" width={1 / 3}>
           <Heading.h4 fontWeight="normal">
             <FormattedMessage {...messages.capacity} />
           </Heading.h4>
         </Text>
-        <Text width={1 / 3} textAlign="right">
+        <Text textAlign="right" width={1 / 3}>
           <Heading.h4 fontWeight="normal">
             <FormattedMessage {...messages.remote_balance} />
           </Heading.h4>
         </Text>
       </Flex>
 
-      <Flex as="header" justifyContent="space-between" alignItems="center" my={2} opacity={opacity}>
+      <Flex alignItems="center" as="header" justifyContent="space-between" my={2} opacity={opacity}>
         <Box width="calc(50% - 15px)">
           <ProgressBar progress={localBalancePercent} />
         </Box>
-        <Text width={30} textAlign="center" color="lightningOrange">
-          <ZapSolid height="20px" fill="currentColor" />
+        <Text color="lightningOrange" textAlign="center" width={30}>
+          <ZapSolid fill="currentColor" height="20px" />
         </Text>
         <Box width="calc(50% - 15px)">
-          <ProgressBar progress={remoteBalancePercent} justify="right" color="superBlue" />
+          <ProgressBar color="superBlue" justify="right" progress={remoteBalancePercent} />
         </Box>
       </Flex>
 
       <Flex as="footer" justifyContent="space-between">
-        <Text width={1 / 3.2} opacity={opacity}>
+        <Text opacity={opacity} width={1 / 3.2}>
           <CryptoValue value={localBalance} />
         </Text>
-        <Flex width={1 / 2.6} justifyContent="center" alignItems="center">
-          <Text textAlign="center" lineHeight="1" opacity={opacity}>
+        <Flex alignItems="center" justifyContent="center" width={1 / 2.6}>
+          <Text lineHeight="1" opacity={opacity} textAlign="center">
             <CryptoValue value={totalBalance} />
           </Text>
-          <CryptoSelector ml={1} buttonOpacity={opacity} />
+          <CryptoSelector buttonOpacity={opacity} ml={1} />
         </Flex>
 
-        <Text width={1 / 3.2} textAlign="right" opacity={opacity}>
+        <Text opacity={opacity} textAlign="right" width={1 / 3.2}>
           <CryptoValue value={remoteBalance} />
         </Text>
       </Flex>
@@ -70,8 +70,8 @@ const ChannelCapacity = ({ localBalance, remoteBalance, opacity, ...rest }) => {
 
 ChannelCapacity.propTypes = {
   localBalance: PropTypes.number.isRequired,
+  opacity: PropTypes.number,
   remoteBalance: PropTypes.number.isRequired,
-  opacity: PropTypes.number
 }
 
 export default ChannelCapacity
diff --git a/app/components/Channels/ChannelCardList.js b/app/components/Channels/ChannelCardList.js
index 79c6c066797..484a1e6c8ef 100644
--- a/app/components/Channels/ChannelCardList.js
+++ b/app/components/Channels/ChannelCardList.js
@@ -17,7 +17,7 @@ const ChannelCardList = ({
   currencyName,
   openModal,
   setSelectedChannel,
-  networkInfo
+  networkInfo,
 }) => {
   const ROW_PADDING_BOTTOM = 3
   // current row height + margin bottom
@@ -33,21 +33,21 @@ const ChannelCardList = ({
     const channel = channels[index].channel || channels[index]
     return (
       <Box
-        width={1 / 2}
-        pr={index % 2 ? 4 : 3}
+        key={key}
+        pb={ROW_PADDING_BOTTOM}
         pl={index % 2 ? 3 : 4}
+        pr={index % 2 ? 4 : 3}
         pt={3}
-        pb={ROW_PADDING_BOTTOM}
         style={style}
-        key={key}
+        width={1 / 2}
       >
         <ChannelCardListItem
           channel={channel}
+          css={{ height: '100%' }}
           currencyName={currencyName}
+          networkInfo={networkInfo}
           openModal={openModal}
           setSelectedChannel={setSelectedChannel}
-          networkInfo={networkInfo}
-          css={{ height: '100%' }}
         />
       </Box>
     )
@@ -58,13 +58,13 @@ const ChannelCardList = ({
       {({ width, height }) => {
         return (
           <StyledList
-            width={width}
-            height={height}
+            cellRenderer={renderRow}
             columnCount={2}
             columnWidth={width / 2}
-            rowHeight={ROW_HEIGHT}
-            cellRenderer={renderRow}
+            height={height}
             rowCount={Math.ceil(channels.length / 2)}
+            rowHeight={ROW_HEIGHT}
+            width={width}
           />
         )
       }}
@@ -75,16 +75,16 @@ const ChannelCardList = ({
 ChannelCardList.propTypes = {
   channels: PropTypes.array,
   currencyName: PropTypes.string.isRequired,
-  openModal: PropTypes.func.isRequired,
-  setSelectedChannel: PropTypes.func.isRequired,
   networkInfo: PropTypes.shape({
     id: PropTypes.string,
-    name: PropTypes.string
-  })
+    name: PropTypes.string,
+  }),
+  openModal: PropTypes.func.isRequired,
+  setSelectedChannel: PropTypes.func.isRequired,
 }
 
 ChannelCardList.defaultProps = {
-  channels: []
+  channels: [],
 }
 
 export default ChannelCardList
diff --git a/app/components/Channels/ChannelCardListItem.js b/app/components/Channels/ChannelCardListItem.js
index 08f9e8db5ee..7b71456b421 100644
--- a/app/components/Channels/ChannelCardListItem.js
+++ b/app/components/Channels/ChannelCardListItem.js
@@ -26,7 +26,7 @@ const ChannelCardListItem = React.memo(
       local_balance,
       remote_balance,
       display_status,
-      active
+      active,
     } = channel
     const opacity = active ? 1 : 0.3
     return (
@@ -38,7 +38,7 @@ const ChannelCardListItem = React.memo(
                 {display_name}
               </ClippedHeading>
 
-              <ChannelStatus status={display_status} mb="auto" />
+              <ChannelStatus mb="auto" status={display_status} />
             </Flex>
             <Flex justifyContent="space-between" opacity={opacity}>
               <Text fontWeight="normal">
@@ -54,22 +54,22 @@ const ChannelCardListItem = React.memo(
           <Panel.Body>
             <ChannelCapacity
               localBalance={local_balance}
-              remoteBalance={remote_balance}
-              opacity={opacity}
               my={4}
+              opacity={opacity}
+              remoteBalance={remote_balance}
             />
 
             <ChannelData
+              as="section"
               channel={channel}
               currencyName={currencyName}
               networkInfo={networkInfo}
-              as="section"
               opacity={opacity}
             />
           </Panel.Body>
 
           <Panel.Footer>
-            <Flex as="footer" justifyContent="center" alignItems="flex-end">
+            <Flex alignItems="flex-end" as="footer" justifyContent="center">
               <ChannelMoreButton
                 onClick={() => {
                   setSelectedChannel(channel_point)
@@ -87,15 +87,15 @@ const ChannelCardListItem = React.memo(
 ChannelCardListItem.displayName = 'ChannelCardListItem'
 
 ChannelCardListItem.propTypes = {
-  intl: intlShape.isRequired,
   channel: PropTypes.object.isRequired,
   currencyName: PropTypes.string.isRequired,
-  setSelectedChannel: PropTypes.func.isRequired,
-  openModal: PropTypes.func.isRequired,
+  intl: intlShape.isRequired,
   networkInfo: PropTypes.shape({
     id: PropTypes.string,
-    name: PropTypes.string
-  }).isRequired
+    name: PropTypes.string,
+  }).isRequired,
+  openModal: PropTypes.func.isRequired,
+  setSelectedChannel: PropTypes.func.isRequired,
 }
 
 export default injectIntl(ChannelCardListItem)
diff --git a/app/components/Channels/ChannelCloseDialog.js b/app/components/Channels/ChannelCloseDialog.js
index 291d1fffb25..af5956353db 100644
--- a/app/components/Channels/ChannelCloseDialog.js
+++ b/app/components/Channels/ChannelCloseDialog.js
@@ -17,30 +17,30 @@ const DialogWrapper = ({ intl, isForceClose, isOpen, onClose, onCancel, csvDelay
   const checkboxFieldName = 'actionACK'
   // bind button disabled state to a form field
   const CloseChannelButton = withFieldState(checkboxFieldName)(({ fieldState, ...rest }) => (
-    <Button disabled={isForceClose && !fieldState.value} {...rest} />
+    <Button isDisabled={isForceClose && !fieldState.value} {...rest} />
   ))
 
   const buttons = (
     <>
-      <CloseChannelButton variant="danger" type="submit">
+      <CloseChannelButton type="submit" variant="danger">
         <FormattedMessage
           {...(isForceClose
             ? messages.close_channel_dialog_force_close_text
             : messages.close_channel_dialog_close_text)}
         />
       </CloseChannelButton>
-      <Button variant="secondary" type="button" onClick={onCancel}>
+      <Button onClick={onCancel} type="button" variant="secondary">
         <FormattedMessage {...messages.close_channel_dialog_cancel_text} />
       </Button>
     </>
   )
 
   const header = (
-    <Flex flexDirection="column" alignItems="center" alignSelf="center">
+    <Flex alignItems="center" alignSelf="center" flexDirection="column">
       <Box color="superRed">
-        <Delete width={72} height={72} />
+        <Delete height={72} width={72} />
       </Box>
-      <Heading.h1 mt={4} mb={3}>
+      <Heading.h1 mb={3} mt={4}>
         <FormattedMessage {...messages.close_channel_dialog_header} />
       </Heading.h1>
     </Flex>
@@ -49,11 +49,11 @@ const DialogWrapper = ({ intl, isForceClose, isOpen, onClose, onCancel, csvDelay
   const handleSubmit = () => onClose(intl.formatMessage({ ...messages.close_channel_notification }))
 
   return (
-    <DialogOverlay justifyContent="center" alignItems="center">
+    <DialogOverlay alignItems="center" justifyContent="center">
       <Form onSubmit={handleSubmit}>
-        <Dialog header={header} buttons={buttons} onClose={onCancel} width={640}>
-          <Flex flexDirection="column" alignItems="center">
-            <Text mb={2} color="gray" width={500} textAlign={isForceClose ? 'left' : 'center'}>
+        <Dialog buttons={buttons} header={header} onClose={onCancel} width={640}>
+          <Flex alignItems="center" flexDirection="column">
+            <Text color="gray" mb={2} textAlign={isForceClose ? 'left' : 'center'} width={500}>
               <FormattedMessage
                 {...(isForceClose
                   ? messages.close_channel_dialog_force_warning
@@ -63,8 +63,8 @@ const DialogWrapper = ({ intl, isForceClose, isOpen, onClose, onCancel, csvDelay
             </Text>
             {isForceClose && (
               <Checkbox
-                label={intl.formatMessage({ ...messages.close_channel_dialog_acknowledgement })}
                 field={checkboxFieldName}
+                label={intl.formatMessage({ ...messages.close_channel_dialog_acknowledgement })}
                 mt={4}
               />
             )}
@@ -76,12 +76,12 @@ const DialogWrapper = ({ intl, isForceClose, isOpen, onClose, onCancel, csvDelay
 }
 
 DialogWrapper.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
+  csvDelay: PropTypes.number.isRequired,
+  intl: intlShape.isRequired,
   isForceClose: PropTypes.bool.isRequired,
-  onClose: PropTypes.func.isRequired,
+  isOpen: PropTypes.bool.isRequired,
   onCancel: PropTypes.func.isRequired,
-  intl: intlShape.isRequired,
-  csvDelay: PropTypes.number.isRequired
+  onClose: PropTypes.func.isRequired,
 }
 
 export default injectIntl(DialogWrapper)
diff --git a/app/components/Channels/ChannelCount.js b/app/components/Channels/ChannelCount.js
index 97a7d525b3b..22680e7812e 100644
--- a/app/components/Channels/ChannelCount.js
+++ b/app/components/Channels/ChannelCount.js
@@ -7,7 +7,7 @@ import messages from './messages'
 
 const ChannelCount = ({ channels, ...rest }) => {
   return (
-    <Flex as="section" alignItems="center" {...rest}>
+    <Flex alignItems="center" as="section" {...rest}>
       <Text fontWeight="normal" mr={2}>
         <FormattedMessage {...messages.channels} />
       </Text>
@@ -17,7 +17,7 @@ const ChannelCount = ({ channels, ...rest }) => {
 }
 
 ChannelCount.propTypes = {
-  channels: PropTypes.array.isRequired
+  channels: PropTypes.array.isRequired,
 }
 
 export default ChannelCount
diff --git a/app/components/Channels/ChannelCreate.js b/app/components/Channels/ChannelCreate.js
index 5839fb24c46..029a398833e 100644
--- a/app/components/Channels/ChannelCreate.js
+++ b/app/components/Channels/ChannelCreate.js
@@ -10,9 +10,9 @@ import ChannelCreateHeader from './ChannelCreateHeader'
 class ChannelCreate extends React.Component {
   static propTypes = {
     isSearchValidNodeAddress: PropTypes.bool,
-    searchQuery: PropTypes.string,
     onSubmit: PropTypes.func,
-    updateContactFormSearchQuery: PropTypes.func.isRequired
+    searchQuery: PropTypes.string,
+    updateContactFormSearchQuery: PropTypes.func.isRequired,
   }
 
   componentWillUnmount() {
@@ -29,14 +29,14 @@ class ChannelCreate extends React.Component {
           <Flex justifyContent="center">
             <Panel.Header width={9 / 16}>
               <ChannelCreateHeader />
-              <Bar mt={2} mb={3} />
+              <Bar mb={3} mt={2} />
             </Panel.Header>
           </Flex>
 
           <Panel.Body css={{ 'overflow-y': 'overlay', 'overflow-x': 'hidden' }}>
-            <Flex flexDirection="column" alignItems="center" css={{ height: '100%' }}>
+            <Flex alignItems="center" css={{ height: '100%' }} flexDirection="column">
               {isSearchValidNodeAddress ? (
-                <ChannelCreateForm width={9 / 16} onSubmit={onSubmit} {...rest} />
+                <ChannelCreateForm onSubmit={onSubmit} width={9 / 16} {...rest} />
               ) : (
                 <>
                   <ChannelNodeSearch width={9 / 16} />
diff --git a/app/components/Channels/ChannelCreateForm.js b/app/components/Channels/ChannelCreateForm.js
index 6c773c1ca8f..4becfa24d6e 100644
--- a/app/components/Channels/ChannelCreateForm.js
+++ b/app/components/Channels/ChannelCreateForm.js
@@ -17,7 +17,7 @@ import {
   Span,
   Spinner,
   Text,
-  Toggle
+  Toggle,
 } from 'components/UI'
 import { CurrencyFieldGroup, CryptoValue, CryptoSelector } from 'containers/UI'
 import Padlock from 'components/Icon/Padlock'
@@ -28,7 +28,7 @@ import messages from './messages'
 import {
   TRANSACTION_SPEED_SLOW,
   TRANSACTION_SPEED_MEDIUM,
-  TRANSACTION_SPEED_FAST
+  TRANSACTION_SPEED_FAST,
 } from './constants'
 
 const speeds = [TRANSACTION_SPEED_SLOW, TRANSACTION_SPEED_MEDIUM, TRANSACTION_SPEED_FAST]
@@ -42,16 +42,16 @@ const ShowHide = Keyframes.Spring({
     await next({ pointerEvents: 'auto' })
     await next({ opacity: 1 })
   },
-  hide: { opacity: 0, pointerEvents: 'none' }
+  hide: { opacity: 0, pointerEvents: 'none' },
 })
 
 const FormButtons = ({ isNextButtonDisabled, nextButtonText, onBack }) => (
   <Flex alignItems="center" mb={3}>
     <Box width={1 / 4}>
-      <ChannelBackButton onClick={onBack} mr="auto" />
+      <ChannelBackButton mr="auto" onClick={onBack} />
     </Box>
-    <Flex width={2 / 4} justifyContent="center">
-      <Button type="submit" disabled={isNextButtonDisabled}>
+    <Flex justifyContent="center" width={2 / 4}>
+      <Button isDisabled={isNextButtonDisabled} type="submit">
         {nextButtonText}
       </Button>
     </Flex>
@@ -61,7 +61,7 @@ const FormButtons = ({ isNextButtonDisabled, nextButtonText, onBack }) => (
 FormButtons.propTypes = {
   isNextButtonDisabled: PropTypes.bool,
   nextButtonText: PropTypes.node.isRequired,
-  onBack: PropTypes.func.isRequired
+  onBack: PropTypes.func.isRequired,
 }
 
 const FormFooter = ({ walletBalance, currencyName }) => (
@@ -77,28 +77,27 @@ const FormFooter = ({ walletBalance, currencyName }) => (
 )
 
 FormFooter.propTypes = {
+  currencyName: PropTypes.string.isRequired,
   walletBalance: PropTypes.number.isRequired,
-  currencyName: PropTypes.string.isRequired
 }
 
 class ChannelCreateForm extends React.Component {
   state = {
-    step: 'form'
+    step: 'form',
   }
 
   static propTypes = {
-    intl: intlShape.isRequired,
     activeWalletSettings: PropTypes.shape({
-      type: PropTypes.string.isRequired
+      type: PropTypes.string.isRequired,
     }).isRequired,
-    walletBalance: PropTypes.number.isRequired,
     currency: PropTypes.string.isRequired,
     currencyName: PropTypes.string.isRequired,
+    intl: intlShape.isRequired,
     isQueryingFees: PropTypes.bool,
     onchainFees: PropTypes.shape({
       fastestFee: PropTypes.number,
       halfHourFee: PropTypes.number,
-      hourFee: PropTypes.number
+      hourFee: PropTypes.number,
     }),
     onSubmit: PropTypes.func.isRequired,
     openChannel: PropTypes.func.isRequired,
@@ -106,12 +105,13 @@ class ChannelCreateForm extends React.Component {
     searchQuery: PropTypes.string,
     selectedNodeDisplayName: PropTypes.string,
     showNotification: PropTypes.func.isRequired,
-    updateContactFormSearchQuery: PropTypes.func.isRequired
+    updateContactFormSearchQuery: PropTypes.func.isRequired,
+    walletBalance: PropTypes.number.isRequired,
   }
 
   static defaultProps = {
     isQueryingFees: false,
-    onchainFees: {}
+    onchainFees: {},
   }
 
   componentDidMount() {
@@ -243,36 +243,36 @@ class ChannelCreateForm extends React.Component {
         <NodePubkeyInput
           field="nodePubkey"
           initialValue={searchQuery}
-          required
-          validateOnChange
+          isDisabled={Boolean(searchQuery)}
+          isRequired
           validateOnBlur
-          disabled={Boolean(searchQuery)}
+          validateOnChange
         />
 
         <Bar my={3} variant="light" />
 
         <CurrencyFieldGroup
+          css={{ height: '88px' }}
           formApi={this.formApi}
+          isRequired
           validate={this.validateAmount}
-          validateOnChange={formState.submits > 0}
           validateOnBlur={formState.submits > 0}
-          required
-          css={{ height: '88px' }}
+          validateOnChange={formState.submits > 0}
         />
 
         <Bar my={3} variant="light" />
 
-        <Flex justifyContent="space-between" alignItems="center">
+        <Flex alignItems="center" justifyContent="space-between">
           <Box>
-            <RadioGroup field="speed" label={intl.formatMessage({ ...messages.fee })} required>
+            <RadioGroup field="speed" isRequired label={intl.formatMessage({ ...messages.fee })}>
               <Flex>
                 {speeds.map(speed => (
                   <Radio
                     key={speed}
-                    value={speed}
                     label={<FormattedMessage {...messages[speed.toLowerCase()]} />}
-                    mr={4}
                     mb={0}
+                    mr={4}
+                    value={speed}
                   />
                 ))}
               </Flex>
@@ -280,7 +280,7 @@ class ChannelCreateForm extends React.Component {
           </Box>
           <Box>
             {isQueryingFees && (
-              <Flex ml="auto" alignItems="center" justifyContent="flex-end">
+              <Flex alignItems="center" justifyContent="flex-end" ml="auto">
                 <Text mr={2}>
                   <FormattedMessage {...messages.calculating} />
                   &hellip;
@@ -292,7 +292,7 @@ class ChannelCreateForm extends React.Component {
             {!isQueryingFees && !fee && <FormattedMessage {...messages.fee_unknown} />}
 
             {!isQueryingFees && fee && (
-              <Flex flexDirection="column" alignItems="flex-end">
+              <Flex alignItems="flex-end" flexDirection="column">
                 <Box>
                   <CryptoValue value={fee} />
                   <CryptoSelector mx={2} />
@@ -309,7 +309,7 @@ class ChannelCreateForm extends React.Component {
         {activeWalletSettings.type !== 'local' && (
           <>
             <Bar my={3} variant="light" />
-            <Flex justifyContent="space-between" alignItems="center">
+            <Flex alignItems="center" justifyContent="space-between">
               <Flex>
                 <Span color="gray" fontSize="s" mr={2}>
                   <Padlock />
@@ -340,9 +340,9 @@ class ChannelCreateForm extends React.Component {
       <ChannelCreateSummary
         amount={amount}
         fee={fee}
-        speed={speed}
-        nodePubkey={nodePubkey}
         nodeDisplayName={selectedNodeDisplayName}
+        nodePubkey={nodePubkey}
+        speed={speed}
       />
     )
   }
@@ -383,7 +383,7 @@ class ChannelCreateForm extends React.Component {
               <Panel.Body css={{ position: 'relative' }}>
                 <ShowHide state={step === 'form' ? 'show' : 'hide'}>
                   {styles => (
-                    <Box style={styles} css={{ position: 'absolute' }}>
+                    <Box css={{ position: 'absolute' }} style={styles}>
                       {this.renderFormFields()}
                     </Box>
                   )}
@@ -398,6 +398,7 @@ class ChannelCreateForm extends React.Component {
 
               <Panel.Footer>
                 <FormButtons
+                  isNextButtonDisabled={formState.submits > 0 && formState.invalid}
                   nextButtonText={
                     <FormattedMessage
                       {...messages[
@@ -408,10 +409,9 @@ class ChannelCreateForm extends React.Component {
                       values={{ amount: `${amountCrypto} ${currency}` }}
                     />
                   }
-                  isNextButtonDisabled={formState.submits > 0 && formState.invalid}
                   onBack={this.onBack}
                 />
-                <FormFooter walletBalance={walletBalance} currencyName={currencyName} />
+                <FormFooter currencyName={currencyName} walletBalance={walletBalance} />
               </Panel.Footer>
             </Panel>
           )
diff --git a/app/components/Channels/ChannelCreateHeader.js b/app/components/Channels/ChannelCreateHeader.js
index 7805484540c..ce805030bb3 100644
--- a/app/components/Channels/ChannelCreateHeader.js
+++ b/app/components/Channels/ChannelCreateHeader.js
@@ -8,9 +8,9 @@ import messages from './messages'
 const ChannelCreateHeader = props => (
   <Box {...props}>
     <Header
-      title={<FormattedMessage {...messages.open_channel_form_title} />}
-      subtitle={<FormattedMessage {...messages.open_channel_form_subtitle} />}
       logo={<LightningChannel height="48px" width="48px" />}
+      subtitle={<FormattedMessage {...messages.open_channel_form_subtitle} />}
+      title={<FormattedMessage {...messages.open_channel_form_title} />}
     />
   </Box>
 )
diff --git a/app/components/Channels/ChannelCreateSummary.js b/app/components/Channels/ChannelCreateSummary.js
index 7ec3bb568b7..d418340543b 100644
--- a/app/components/Channels/ChannelCreateSummary.js
+++ b/app/components/Channels/ChannelCreateSummary.js
@@ -10,7 +10,7 @@ import { withEllipsis } from 'hocs'
 import {
   TRANSACTION_SPEED_SLOW,
   TRANSACTION_SPEED_MEDIUM,
-  TRANSACTION_SPEED_FAST
+  TRANSACTION_SPEED_FAST,
 } from './constants'
 import messages from './messages'
 
@@ -20,13 +20,13 @@ class ChannelCreateSummary extends React.Component {
   static propTypes = {
     amount: PropTypes.number,
     fee: PropTypes.number.isRequired,
+    nodeDisplayName: PropTypes.string,
+    nodePubkey: PropTypes.string.isRequired,
     speed: PropTypes.oneOf([
       TRANSACTION_SPEED_SLOW,
       TRANSACTION_SPEED_MEDIUM,
-      TRANSACTION_SPEED_FAST
+      TRANSACTION_SPEED_FAST,
     ]),
-    nodePubkey: PropTypes.string.isRequired,
-    nodeDisplayName: PropTypes.string
   }
 
   render() {
@@ -39,8 +39,8 @@ class ChannelCreateSummary extends React.Component {
         <Box py={3}>
           <Flex alignItems="center">
             <Box width={5 / 11}>
-              <Flex flexWrap="wrap" alignItems="baseline">
-                <Text textAlign="left" fontSize={6}>
+              <Flex alignItems="baseline" flexWrap="wrap">
+                <Text fontSize={6} textAlign="left">
                   <CryptoValue value={amount} />
                 </Text>
                 <CryptoSelector ml={2} />
@@ -50,24 +50,24 @@ class ChannelCreateSummary extends React.Component {
                 <FiatValue style="currency" value={amount} />
               </Text>
             </Box>
-            <Flex justifyContent="center" width={1 / 11} color="lightningOrange">
-              <BigArrowRight width="40px" height="28px" />
+            <Flex color="lightningOrange" justifyContent="center" width={1 / 11}>
+              <BigArrowRight height="28px" width="40px" />
             </Flex>
             <Flex
-              flexDirection="column"
-              width={5 / 11}
               className="hint--bottom-left"
               data-hint={nodePubkey}
+              flexDirection="column"
               ml={3}
+              width={5 / 11}
             >
               {nodeDisplayName && (
-                <ClippedText textAlign="right" fontSize="xl">
+                <ClippedText fontSize="xl" textAlign="right">
                   {nodeDisplayName}
                 </ClippedText>
               )}
               {nodePubkey && (
-                <Text textAlign="right" color={nodeDisplayName ? 'gray' : null}>
-                  <Truncate text={pubkey} maxlen={25} />
+                <Text color={nodeDisplayName ? 'gray' : null} textAlign="right">
+                  <Truncate maxlen={25} text={pubkey} />
                 </Text>
               )}
             </Flex>
@@ -81,10 +81,10 @@ class ChannelCreateSummary extends React.Component {
             <DataRow
               left={<FormattedMessage {...messages.fee} />}
               right={
-                <Flex flexDirection="column" alignItems="flex-end">
+                <Flex alignItems="flex-end" flexDirection="column">
                   <Flex alignItems="center">
                     <CryptoValue value={fee} />
-                    <CryptoSelector ml={2} justify="right" />
+                    <CryptoSelector justify="right" ml={2} />
                   </Flex>
                   <Text color="gray">
                     <FormattedMessage {...messages[speedTitleMessageKey]} />
@@ -100,7 +100,7 @@ class ChannelCreateSummary extends React.Component {
               right={
                 <>
                   <CryptoValue value={amount + fee} />
-                  <CryptoSelector ml={2} justify="right" />
+                  <CryptoSelector justify="right" ml={2} />
                 </>
               }
             />
diff --git a/app/components/Channels/ChannelData.js b/app/components/Channels/ChannelData.js
index cde2fe3d578..00f29dc6448 100644
--- a/app/components/Channels/ChannelData.js
+++ b/app/components/Channels/ChannelData.js
@@ -22,7 +22,7 @@ const ChannelData = ({ channel, currencyName, networkInfo, viewMode, ...rest })
     total_satoshis_sent,
     total_satoshis_received,
     csv_delay,
-    num_updates
+    num_updates,
   } = channel
   const [fundingTxid] = channel_point.split(':')
 
@@ -35,9 +35,9 @@ const ChannelData = ({ channel, currencyName, networkInfo, viewMode, ...rest })
         <Link
           onClick={() => networkInfo && blockExplorer.showTransaction(networkInfo, fundingTxid)}
         >
-          <Truncate text={fundingTxid} maxlen={25} />
+          <Truncate maxlen={25} text={fundingTxid} />
         </Link>
-      )
+      ),
     },
     {
       id: 'closing_txid',
@@ -47,21 +47,21 @@ const ChannelData = ({ channel, currencyName, networkInfo, viewMode, ...rest })
         <Link
           onClick={() => networkInfo && blockExplorer.showTransaction(networkInfo, closing_txid)}
         >
-          <Truncate text={closing_txid} maxlen={25} />
+          <Truncate maxlen={25} text={closing_txid} />
         </Link>
-      )
+      ),
     },
     {
       id: 'num_updates',
       label: <FormattedMessage {...messages.num_updates_label} />,
       body: <FormattedMessage {...messages.num_updates_description} />,
-      value: num_updates
+      value: num_updates,
     },
     {
       id: 'csv_delay',
       label: <FormattedMessage {...messages.csv_delay_label} />,
       body: <FormattedMessage {...messages.csv_delay_description} />,
-      value: csv_delay
+      value: csv_delay,
     },
     {
       id: 'total_satoshis_sent',
@@ -73,7 +73,7 @@ const ChannelData = ({ channel, currencyName, networkInfo, viewMode, ...rest })
           {` `}
           {currencyName}
         </>
-      )
+      ),
     },
     {
       id: 'total_satoshis_received',
@@ -85,7 +85,7 @@ const ChannelData = ({ channel, currencyName, networkInfo, viewMode, ...rest })
           {` `}
           {currencyName}
         </>
-      )
+      ),
     },
     {
       id: 'commit_fee',
@@ -97,7 +97,7 @@ const ChannelData = ({ channel, currencyName, networkInfo, viewMode, ...rest })
           {` `}
           {currencyName}
         </>
-      )
+      ),
     },
     {
       id: 'fee_per_kw',
@@ -109,8 +109,8 @@ const ChannelData = ({ channel, currencyName, networkInfo, viewMode, ...rest })
           {` `}
           {currencyName}
         </>
-      )
-    }
+      ),
+    },
   ]
 
   const idsToInclude =
@@ -124,7 +124,7 @@ const ChannelData = ({ channel, currencyName, networkInfo, viewMode, ...rest })
           'total_satoshis_sent',
           'total_satoshis_received',
           'commit_fee',
-          'fee_per_kw'
+          'fee_per_kw',
         ]
 
   const rows = idsToInclude.filter(id => channel[id] != null).map(id => data.find(d => d.id === id))
@@ -135,11 +135,11 @@ const ChannelData = ({ channel, currencyName, networkInfo, viewMode, ...rest })
         <React.Fragment key={row.id}>
           <Bar variant="light" />
           <DataRow
-            left={row.label}
-            right={row.value}
             body={viewMode === CHANNEL_DATA_VIEW_MODE_FULL ? row.body : null}
-            py={viewMode === CHANNEL_DATA_VIEW_MODE_FULL ? 3 : 2}
+            left={row.label}
             pr={2}
+            py={viewMode === CHANNEL_DATA_VIEW_MODE_FULL ? 3 : 2}
+            right={row.value}
           />
         </React.Fragment>
       ))}
@@ -150,15 +150,15 @@ const ChannelData = ({ channel, currencyName, networkInfo, viewMode, ...rest })
 ChannelData.propTypes = {
   channel: PropTypes.object.isRequired,
   currencyName: PropTypes.string.isRequired,
-  viewMode: PropTypes.oneOf([CHANNEL_DATA_VIEW_MODE_BASIC, CHANNEL_DATA_VIEW_MODE_FULL]),
   networkInfo: PropTypes.shape({
     id: PropTypes.string,
-    name: PropTypes.string
-  }).isRequired
+    name: PropTypes.string,
+  }).isRequired,
+  viewMode: PropTypes.oneOf([CHANNEL_DATA_VIEW_MODE_BASIC, CHANNEL_DATA_VIEW_MODE_FULL]),
 }
 
 ChannelData.defaultProps = {
-  viewMode: CHANNEL_DATA_VIEW_MODE_BASIC
+  viewMode: CHANNEL_DATA_VIEW_MODE_BASIC,
 }
 
 export default ChannelData
diff --git a/app/components/Channels/ChannelDetail.js b/app/components/Channels/ChannelDetail.js
index bf5e71360ff..6cb487a3060 100644
--- a/app/components/Channels/ChannelDetail.js
+++ b/app/components/Channels/ChannelDetail.js
@@ -16,28 +16,28 @@ const ChannelDetail = ({
   ...rest
 }) => (
   <Panel {...rest}>
-    <Panel.Header width={9 / 16} mx="auto">
+    <Panel.Header mx="auto" width={9 / 16}>
       <ChannelHeader channel={channel} />
     </Panel.Header>
     <Panel.Body css={{ 'overflow-y': 'overlay', 'overflow-x': 'hidden' }}>
       <ChannelCapacity
         localBalance={channel.local_balance}
-        remoteBalance={channel.remote_balance}
-        width={9 / 16}
         mx="auto"
         my={4}
+        remoteBalance={channel.remote_balance}
+        width={9 / 16}
       />
       <ChannelData
         channel={channel}
         currencyName={currencyName}
+        mx="auto"
         networkInfo={networkInfo}
         viewMode={CHANNEL_DATA_VIEW_MODE_FULL}
         width={9 / 16}
-        mx="auto"
       />
     </Panel.Body>
 
-    <Panel.Footer px={4} mt={2}>
+    <Panel.Footer mt={2} px={4}>
       <ChannelFooter channel={channel} closeChannel={closeChannel} />
     </Panel.Footer>
   </Panel>
@@ -45,13 +45,13 @@ const ChannelDetail = ({
 
 ChannelDetail.propTypes = {
   channel: PropTypes.object.isRequired,
-  currencyName: PropTypes.string.isRequired,
   closeChannel: PropTypes.func.isRequired,
-  setSelectedChannel: PropTypes.func.isRequired,
+  currencyName: PropTypes.string.isRequired,
   networkInfo: PropTypes.shape({
     id: PropTypes.string,
-    name: PropTypes.string
-  })
+    name: PropTypes.string,
+  }),
+  setSelectedChannel: PropTypes.func.isRequired,
 }
 
 export default ChannelDetail
diff --git a/app/components/Channels/ChannelFilter.js b/app/components/Channels/ChannelFilter.js
index 9b367055f4b..c8302796749 100644
--- a/app/components/Channels/ChannelFilter.js
+++ b/app/components/Channels/ChannelFilter.js
@@ -7,7 +7,7 @@ const ChannelFilter = ({ changeFilter, filter, filters, ...rest }) => {
   const items = filters.map(f => {
     return {
       key: f.key,
-      value: f.name
+      value: f.name,
     }
   })
 
@@ -15,11 +15,11 @@ const ChannelFilter = ({ changeFilter, filter, filters, ...rest }) => {
     <Form {...rest}>
       <Select
         field="channel-filter"
+        highlightOnValid={false}
         id="channel-filter"
-        items={items}
         initialSelectedItem={filter}
+        items={items}
         onValueSelected={changeFilter}
-        highlightOnValid={false}
       />
     </Form>
   )
@@ -28,11 +28,11 @@ const ChannelFilter = ({ changeFilter, filter, filters, ...rest }) => {
 ChannelFilter.propTypes = {
   changeFilter: PropTypes.func.isRequired,
   filter: PropTypes.string,
-  filters: PropTypes.array
+  filters: PropTypes.array,
 }
 
 ChannelFilter.defaultProps = {
-  filters: []
+  filters: [],
 }
 
 export default ChannelFilter
diff --git a/app/components/Channels/ChannelFooter.js b/app/components/Channels/ChannelFooter.js
index e68355b8717..e1596e2ad14 100644
--- a/app/components/Channels/ChannelFooter.js
+++ b/app/components/Channels/ChannelFooter.js
@@ -9,7 +9,7 @@ const ChannelFooter = ({ channel, closeChannel }) => {
   return (
     <Flex alignItems="center" justifyContent="center">
       {channel.can_close && (
-        <Button variant="danger" onClick={closeChannel}>
+        <Button onClick={closeChannel} variant="danger">
           <FormattedMessage {...messages[channel.active ? 'close_button' : 'force_close_button']} />
         </Button>
       )}
@@ -19,7 +19,7 @@ const ChannelFooter = ({ channel, closeChannel }) => {
 
 ChannelFooter.propTypes = {
   channel: PropTypes.object.isRequired,
-  closeChannel: PropTypes.func.isRequired
+  closeChannel: PropTypes.func.isRequired,
 }
 
 export default ChannelFooter
diff --git a/app/components/Channels/ChannelHeader.js b/app/components/Channels/ChannelHeader.js
index 79e621d0c00..aa2cb912caa 100644
--- a/app/components/Channels/ChannelHeader.js
+++ b/app/components/Channels/ChannelHeader.js
@@ -19,7 +19,7 @@ const ChannelHeader = ({ intl, channel, ...rest }) => {
     <Box {...rest}>
       <Flex justifyContent="space-between">
         <ClippedHeading my={1}>{display_name}</ClippedHeading>
-        <ChannelStatus status={display_status} mb="auto" />
+        <ChannelStatus mb="auto" status={display_status} />
       </Flex>
       <ClippedText>{display_pubkey}</ClippedText>
       <Box>
@@ -30,8 +30,8 @@ const ChannelHeader = ({ intl, channel, ...rest }) => {
 }
 
 ChannelHeader.propTypes = {
+  channel: PropTypes.object.isRequired,
   intl: intlShape.isRequired,
-  channel: PropTypes.object.isRequired
 }
 
 export default injectIntl(ChannelHeader)
diff --git a/app/components/Channels/ChannelMoreButton.js b/app/components/Channels/ChannelMoreButton.js
index 5a5081c0ab3..bb8408c1834 100644
--- a/app/components/Channels/ChannelMoreButton.js
+++ b/app/components/Channels/ChannelMoreButton.js
@@ -4,7 +4,7 @@ import { Button } from 'components/UI'
 import messages from './messages'
 
 const ChannelMoreButton = props => (
-  <Button type="button" size="small" {...props}>
+  <Button size="small" type="button" {...props}>
     <FormattedMessage {...messages.more_button_text} />
   </Button>
 )
diff --git a/app/components/Channels/ChannelNodeSearch.js b/app/components/Channels/ChannelNodeSearch.js
index b56e72bc96b..126052ae044 100644
--- a/app/components/Channels/ChannelNodeSearch.js
+++ b/app/components/Channels/ChannelNodeSearch.js
@@ -20,20 +20,20 @@ const SearchResults = ({ filteredNetworkNodes, onClickConnect, ...rest }) => (
     {filteredNetworkNodes.map(node => {
       return (
         <React.Fragment key={node.pub_key}>
-          <Flex justifyContent="space-between" alignItems="center" py={2} pr={2}>
+          <Flex alignItems="center" justifyContent="space-between" pr={2} py={2}>
             <NodeNameContainer mr={3}>
               {node.alias.length > 0 ? (
                 <>
                   <ClippedText>{node.alias.trim()}</ClippedText>
                   <Text color="gray" fontSize="s">
-                    <Truncate text={node.pub_key} maxlen={25} />
+                    <Truncate maxlen={25} text={node.pub_key} />
                   </Text>
                 </>
               ) : (
                 <ClippedText>{node.pub_key}</ClippedText>
               )}
             </NodeNameContainer>
-            <Button size="small" type="button" onClick={() => onClickConnect(node)}>
+            <Button onClick={() => onClickConnect(node)} size="small" type="button">
               <FormattedMessage {...messages.connect} />
             </Button>
           </Flex>
@@ -46,17 +46,17 @@ const SearchResults = ({ filteredNetworkNodes, onClickConnect, ...rest }) => (
 
 SearchResults.propTypes = {
   filteredNetworkNodes: PropTypes.array.isRequired,
-  onClickConnect: PropTypes.func.isRequired
+  onClickConnect: PropTypes.func.isRequired,
 }
 
 const NoSearchResults = () => <Text color="gray">Your seach did not return any results.</Text>
 
 class ChannelNodeSearch extends React.PureComponent {
   static propTypes = {
+    filteredNetworkNodes: PropTypes.array.isRequired,
     intl: intlShape.isRequired,
     searchQuery: PropTypes.string,
     updateContactFormSearchQuery: PropTypes.func.isRequired,
-    filteredNetworkNodes: PropTypes.array.isRequired
   }
 
   /*eslint-disable react/destructuring-assignment*/
@@ -103,14 +103,14 @@ class ChannelNodeSearch extends React.PureComponent {
 
         <Form getApi={this.setFormApi}>
           <Input
+            description={intl.formatMessage({ ...messages.node_search_description })}
             field="search"
             id="search"
-            type="search"
-            placeholder={intl.formatMessage({ ...messages.node_search_placeholder })}
-            description={intl.formatMessage({ ...messages.node_search_description })}
-            onValueChange={this.handleSearchUpdated}
             initialValue={searchQuery}
-            required
+            isRequired
+            onValueChange={this.handleSearchUpdated}
+            placeholder={intl.formatMessage({ ...messages.node_search_placeholder })}
+            type="search"
           />
         </Form>
 
diff --git a/app/components/Channels/ChannelSearch.js b/app/components/Channels/ChannelSearch.js
index bb0928b7dce..dba7e3866d1 100644
--- a/app/components/Channels/ChannelSearch.js
+++ b/app/components/Channels/ChannelSearch.js
@@ -6,21 +6,21 @@ const ChannelSearch = ({ searchQuery, placeholder, updateChannelSearchQuery, ...
   <Form {...rest}>
     <Input
       field="channel-search"
+      highlightOnValid={false}
       id="channel-search"
-      type="search"
-      placeholder={placeholder}
       initialValue={searchQuery}
-      onValueChange={updateChannelSearchQuery}
-      highlightOnValid={false}
       mr={2}
+      onValueChange={updateChannelSearchQuery}
+      placeholder={placeholder}
+      type="search"
     />
   </Form>
 )
 
 ChannelSearch.propTypes = {
-  searchQuery: PropTypes.string,
   placeholder: PropTypes.string.isRequired,
-  updateChannelSearchQuery: PropTypes.func.isRequired
+  searchQuery: PropTypes.string,
+  updateChannelSearchQuery: PropTypes.func.isRequired,
 }
 
 export default ChannelSearch
diff --git a/app/components/Channels/ChannelStatus.js b/app/components/Channels/ChannelStatus.js
index 2e97af98db7..0f140628370 100644
--- a/app/components/Channels/ChannelStatus.js
+++ b/app/components/Channels/ChannelStatus.js
@@ -13,7 +13,7 @@ const variantMap = {
   pending_close: 'closing',
   pending_force_close: 'closing',
   waiting_close: 'closing',
-  offline: 'offline'
+  offline: 'offline',
 }
 
 const StatusText = styled(Text)`
@@ -34,7 +34,7 @@ const ChannelStatus = ({ status, ...rest }) => (
 )
 
 ChannelStatus.propTypes = {
-  status: PropTypes.oneOf(Object.keys(variantMap))
+  status: PropTypes.oneOf(Object.keys(variantMap)),
 }
 
 export default ChannelStatus
diff --git a/app/components/Channels/ChannelSummaryList.js b/app/components/Channels/ChannelSummaryList.js
index 192d000ec1b..6cc44996f41 100644
--- a/app/components/Channels/ChannelSummaryList.js
+++ b/app/components/Channels/ChannelSummaryList.js
@@ -25,14 +25,14 @@ const ChannelSummaryList = ({ channels, openModal, setSelectedChannel }) => {
     const { index, key, style } = rowProps
     const channel = channels[index].channel || channels[index]
     return (
-      <div style={style} key={key}>
+      <div key={key} style={style}>
         <ChannelSummaryListItem
-          mx={4}
           channel={channel}
+          mb={isLastItem(index) ? ROW_MARGIN_TOP : 0}
+          mt={ROW_MARGIN_TOP}
+          mx={4}
           openModal={openModal}
           setSelectedChannel={setSelectedChannel}
-          mt={ROW_MARGIN_TOP}
-          mb={isLastItem(index) ? ROW_MARGIN_TOP : 0}
         />
       </div>
     )
@@ -43,12 +43,12 @@ const ChannelSummaryList = ({ channels, openModal, setSelectedChannel }) => {
       {({ width, height }) => {
         return (
           <StyledList
-            width={width}
             height={height}
+            pb={3}
+            rowCount={channels.length}
             rowHeight={getRowHeight}
             rowRenderer={renderRow}
-            rowCount={channels.length}
-            pb={3}
+            width={width}
           />
         )
       }}
@@ -59,11 +59,11 @@ const ChannelSummaryList = ({ channels, openModal, setSelectedChannel }) => {
 ChannelSummaryList.propTypes = {
   channels: PropTypes.array,
   openModal: PropTypes.func.isRequired,
-  setSelectedChannel: PropTypes.func.isRequired
+  setSelectedChannel: PropTypes.func.isRequired,
 }
 
 ChannelSummaryList.defaultProps = {
-  channels: []
+  channels: [],
 }
 
 export default ChannelSummaryList
diff --git a/app/components/Channels/ChannelSummaryListItem.js b/app/components/Channels/ChannelSummaryListItem.js
index c1c2069102f..2045ae9a2f2 100644
--- a/app/components/Channels/ChannelSummaryListItem.js
+++ b/app/components/Channels/ChannelSummaryListItem.js
@@ -19,7 +19,7 @@ const ChannelSummaryListItem = React.memo(props => {
     local_balance,
     remote_balance,
     display_status,
-    active
+    active,
   } = channel
   const opacity = active ? 1 : 0.3
 
@@ -38,14 +38,14 @@ const ChannelSummaryListItem = React.memo(props => {
 
         <ChannelCapacity
           localBalance={local_balance}
-          remoteBalance={remote_balance}
-          width={1 / 2}
+          opacity={opacity}
           pl={4}
           pr={4}
-          opacity={opacity}
+          remoteBalance={remote_balance}
+          width={1 / 2}
         />
 
-        <Flex width={2 / 20} alignItems="center" flexDirection="column">
+        <Flex alignItems="center" flexDirection="column" width={2 / 20}>
           <ChannelMoreButton
             onClick={() => {
               setSelectedChannel(channel_point)
@@ -63,7 +63,7 @@ ChannelSummaryListItem.displayName = 'ChannelSummaryListItem'
 ChannelSummaryListItem.propTypes = {
   channel: PropTypes.object.isRequired,
   openModal: PropTypes.func.isRequired,
-  setSelectedChannel: PropTypes.func.isRequired
+  setSelectedChannel: PropTypes.func.isRequired,
 }
 
 export default ChannelSummaryListItem
diff --git a/app/components/Channels/Channels.js b/app/components/Channels/Channels.js
index 284331e57f0..44651be8e13 100644
--- a/app/components/Channels/Channels.js
+++ b/app/components/Channels/Channels.js
@@ -16,27 +16,27 @@ const StyledPersistentTabControl = styled(PersistentTabControl)`
 class Channels extends React.Component {
   static propTypes = {
     allChannels: PropTypes.array,
-    channels: PropTypes.array,
+    changeFilter: PropTypes.func.isRequired,
     channelBalance: PropTypes.number.isRequired,
+    channels: PropTypes.array,
+    channelViewMode: PropTypes.string.isRequired,
     currencyName: PropTypes.string.isRequired,
     filter: PropTypes.string.isRequired,
     filters: PropTypes.array.isRequired,
+    networkInfo: PropTypes.shape({
+      id: PropTypes.string,
+      name: PropTypes.string,
+    }),
+    openModal: PropTypes.func.isRequired,
     searchQuery: PropTypes.string,
-    changeFilter: PropTypes.func.isRequired,
+    setChannelViewMode: PropTypes.func.isRequired,
     setSelectedChannel: PropTypes.func.isRequired,
-    openModal: PropTypes.func.isRequired,
     updateChannelSearchQuery: PropTypes.func.isRequired,
-    channelViewMode: PropTypes.string.isRequired,
-    setChannelViewMode: PropTypes.func.isRequired,
-    networkInfo: PropTypes.shape({
-      id: PropTypes.string,
-      name: PropTypes.string
-    })
   }
 
   static defaultProps = {
     allChannels: [],
-    channels: []
+    channels: [],
   }
 
   /*eslint-disable react/destructuring-assignment*/
@@ -65,16 +65,16 @@ class Channels extends React.Component {
       <Panel {...rest}>
         <Panel.Header mx={4}>
           <ChannelsHeader
-            channels={allChannels}
+            changeFilter={changeFilter}
             channelBalance={channelBalance}
+            channels={allChannels}
+            channelViewMode={channelViewMode}
             filter={filter}
             filters={filters}
-            updateChannelSearchQuery={this.updateChannelSearchQuery}
-            channelViewMode={channelViewMode}
-            setChannelViewMode={setChannelViewMode}
             openModal={openModal}
             searchQuery={searchQuery}
-            changeFilter={changeFilter}
+            setChannelViewMode={setChannelViewMode}
+            updateChannelSearchQuery={this.updateChannelSearchQuery}
           />
         </Panel.Header>
         <Panel.Body css={{ overflow: 'hidden' }}>
@@ -84,16 +84,16 @@ class Channels extends React.Component {
             <ChannelCardList
               channels={channels}
               currencyName={currencyName}
+              networkInfo={networkInfo}
               openModal={openModal}
               setSelectedChannel={setSelectedChannel}
-              networkInfo={networkInfo}
             />
             <ChannelSummaryList
               channels={channels}
               currencyName={currencyName}
+              networkInfo={networkInfo}
               openModal={openModal}
               setSelectedChannel={setSelectedChannel}
-              networkInfo={networkInfo}
             />
           </StyledPersistentTabControl>
         </Panel.Body>
diff --git a/app/components/Channels/ChannelsActions.js b/app/components/Channels/ChannelsActions.js
index 51d3969f25c..38e35af2850 100644
--- a/app/components/Channels/ChannelsActions.js
+++ b/app/components/Channels/ChannelsActions.js
@@ -20,43 +20,43 @@ const ChannelsActions = ({
   intl,
   ...rest
 }) => (
-  <Flex as="section" alignItems="center" {...rest}>
+  <Flex alignItems="center" as="section" {...rest}>
     <ChannelSearch
-      width={7.5 / 16}
       placeholder={intl.formatMessage({ ...messages.search_placeholder })}
       searchQuery={searchQuery}
       updateChannelSearchQuery={updateChannelSearchQuery}
+      width={7.5 / 16}
     />
 
     <ChannelFilter
-      width={2.5 / 16}
+      changeFilter={changeFilter}
       filter={filter}
       filters={filters}
-      changeFilter={changeFilter}
       mr={1}
+      width={2.5 / 16}
     />
     <ChannelsViewSwitcher
-      ml={3}
       channelViewMode={channelViewMode}
+      ml={3}
       setChannelViewMode={setChannelViewMode}
     />
 
-    <Button onClick={() => openModal('CHANNEL_CREATE')} ml="auto">
+    <Button ml="auto" onClick={() => openModal('CHANNEL_CREATE')}>
       <FormattedMessage {...messages.create_new_button_text} />
     </Button>
   </Flex>
 )
 
 ChannelsActions.propTypes = {
+  changeFilter: PropTypes.func.isRequired,
+  channelViewMode: PropTypes.string.isRequired,
   filter: PropTypes.string.isRequired,
   filters: PropTypes.array.isRequired,
   intl: intlShape.isRequired,
+  openModal: PropTypes.func.isRequired,
   searchQuery: PropTypes.string,
-  changeFilter: PropTypes.func.isRequired,
-  updateChannelSearchQuery: PropTypes.func.isRequired,
-  channelViewMode: PropTypes.string.isRequired,
   setChannelViewMode: PropTypes.func.isRequired,
-  openModal: PropTypes.func.isRequired
+  updateChannelSearchQuery: PropTypes.func.isRequired,
 }
 
 export default injectIntl(ChannelsActions)
diff --git a/app/components/Channels/ChannelsHeader.js b/app/components/Channels/ChannelsHeader.js
index 9532391b2aa..08e4e7741e3 100644
--- a/app/components/Channels/ChannelsHeader.js
+++ b/app/components/Channels/ChannelsHeader.js
@@ -18,35 +18,35 @@ const ChannelsHeader = ({
   ...rest
 }) => (
   <Box as="header" mb={3} {...rest}>
-    <ChannelsInfo channels={channels} channelBalance={channelBalance} mb={3} />
+    <ChannelsInfo channelBalance={channelBalance} channels={channels} mb={3} />
     <ChannelsActions
+      changeFilter={changeFilter}
+      channelViewMode={channelViewMode}
       filter={filter}
       filters={filters}
-      changeFilter={changeFilter}
-      updateChannelSearchQuery={updateChannelSearchQuery}
+      openModal={openModal}
       searchQuery={searchQuery}
-      channelViewMode={channelViewMode}
       setChannelViewMode={setChannelViewMode}
-      openModal={openModal}
+      updateChannelSearchQuery={updateChannelSearchQuery}
     />
   </Box>
 )
 
 ChannelsHeader.propTypes = {
-  channels: PropTypes.array,
+  changeFilter: PropTypes.func.isRequired,
   channelBalance: PropTypes.number.isRequired,
+  channels: PropTypes.array,
+  channelViewMode: PropTypes.string.isRequired,
   filter: PropTypes.string.isRequired,
   filters: PropTypes.array.isRequired,
+  openModal: PropTypes.func.isRequired,
   searchQuery: PropTypes.string,
-  changeFilter: PropTypes.func.isRequired,
-  updateChannelSearchQuery: PropTypes.func.isRequired,
-  channelViewMode: PropTypes.string.isRequired,
   setChannelViewMode: PropTypes.func.isRequired,
-  openModal: PropTypes.func.isRequired
+  updateChannelSearchQuery: PropTypes.func.isRequired,
 }
 
 ChannelsHeader.defaultProps = {
-  channels: []
+  channels: [],
 }
 
 export default ChannelsHeader
diff --git a/app/components/Channels/ChannelsInfo.js b/app/components/Channels/ChannelsInfo.js
index 2731171b068..0e8816d3a77 100644
--- a/app/components/Channels/ChannelsInfo.js
+++ b/app/components/Channels/ChannelsInfo.js
@@ -5,19 +5,19 @@ import ChannelBalance from './ChannelBalance'
 import ChannelCount from './ChannelCount'
 
 const ChannelsInfo = ({ channels, channelBalance, ...rest }) => (
-  <Flex as="section" alignItems="center" {...rest}>
+  <Flex alignItems="center" as="section" {...rest}>
     <ChannelCount channels={channels} mr={4} />
     <ChannelBalance channelBalance={channelBalance} />
   </Flex>
 )
 
 ChannelsInfo.propTypes = {
+  channelBalance: PropTypes.number.isRequired,
   channels: PropTypes.array,
-  channelBalance: PropTypes.number.isRequired
 }
 
 ChannelsInfo.defaultProps = {
-  channels: []
+  channels: [],
 }
 
 export default ChannelsInfo
diff --git a/app/components/Channels/ChannelsViewSwitcher.js b/app/components/Channels/ChannelsViewSwitcher.js
index 212baa78903..3256aa22d39 100644
--- a/app/components/Channels/ChannelsViewSwitcher.js
+++ b/app/components/Channels/ChannelsViewSwitcher.js
@@ -16,17 +16,17 @@ const StyledButton = styled(Button)`
   }
 `
 StyledButton.propTypes = {
-  active: PropTypes.bool
+  active: PropTypes.bool,
 }
 
 const CardButton = injectIntl(({ active, onClick, intl, ...rest }) => (
   <StyledButton
-    variant="secondary"
-    size="small"
     active={active}
-    onClick={onClick}
     className="hint--bottom-left"
     data-hint={intl.formatMessage({ ...messages.view_mode_card })}
+    onClick={onClick}
+    size="small"
+    variant="secondary"
     {...rest}
   >
     <LayoutCards height="16px" width="16px" />
@@ -35,18 +35,18 @@ const CardButton = injectIntl(({ active, onClick, intl, ...rest }) => (
 
 CardButton.propTypes = {
   active: PropTypes.bool,
-  onClick: PropTypes.func.isRequired
+  onClick: PropTypes.func.isRequired,
 }
 
 const ListButton = injectIntl(({ active, onClick, intl, ...rest }) => (
   <StyledButton
-    alignSelf="center"
-    variant="secondary"
-    size="small"
     active={active}
-    onClick={onClick}
+    alignSelf="center"
     className="hint--bottom-left"
     data-hint={intl.formatMessage({ ...messages.view_mode_list })}
+    onClick={onClick}
+    size="small"
+    variant="secondary"
     {...rest}
   >
     <LayoutList height="16px" width="16px" />
@@ -55,11 +55,11 @@ const ListButton = injectIntl(({ active, onClick, intl, ...rest }) => (
 
 ListButton.propTypes = {
   active: PropTypes.bool,
-  onClick: PropTypes.func.isRequired
+  onClick: PropTypes.func.isRequired,
 }
 
 const ChannelsViewSwitcher = ({ channelViewMode, setChannelViewMode, ...rest }) => (
-  <Flex as="section" alignItems="center" {...rest}>
+  <Flex alignItems="center" as="section" {...rest}>
     <CardButton
       active={channelViewMode === CHANNEL_LIST_VIEW_MODE_CARD}
       onClick={() => setChannelViewMode(CHANNEL_LIST_VIEW_MODE_CARD)}
@@ -77,7 +77,7 @@ const ChannelsViewSwitcher = ({ channelViewMode, setChannelViewMode, ...rest })
 
 ChannelsViewSwitcher.propTypes = {
   channelViewMode: PropTypes.string.isRequired,
-  setChannelViewMode: PropTypes.func.isRequired
+  setChannelViewMode: PropTypes.func.isRequired,
 }
 
 export default ChannelsViewSwitcher
diff --git a/app/components/Channels/NodeCardList.js b/app/components/Channels/NodeCardList.js
index f7e524af8dc..f6af8e9b870 100644
--- a/app/components/Channels/NodeCardList.js
+++ b/app/components/Channels/NodeCardList.js
@@ -21,10 +21,10 @@ const NodeCardList = ({ nodes, updateContactFormSearchQuery, ...rest }) => (
         return (
           <Flex
             key={nodeInfo.pubkey}
-            width={1 / 3}
+            pb={4}
             pl={isLeft ? 0 : isMiddle ? 3 : 4}
             pr={isRight ? 0 : isMiddle ? 3 : 4}
-            pb={4}
+            width={1 / 3}
           >
             <NodeCardView {...nodeInfo} nodeClicked={updateContactFormSearchQuery} width={1} />
           </Flex>
@@ -36,11 +36,11 @@ const NodeCardList = ({ nodes, updateContactFormSearchQuery, ...rest }) => (
 
 NodeCardList.propTypes = {
   nodes: PropTypes.array,
-  updateContactFormSearchQuery: PropTypes.func.isRequired
+  updateContactFormSearchQuery: PropTypes.func.isRequired,
 }
 
 NodeCardList.defaultProps = {
-  nodes: []
+  nodes: [],
 }
 
 export default React.memo(NodeCardList)
diff --git a/app/components/Channels/NodeCardView.js b/app/components/Channels/NodeCardView.js
index 227897528e0..4d8cdcad148 100644
--- a/app/components/Channels/NodeCardView.js
+++ b/app/components/Channels/NodeCardView.js
@@ -44,7 +44,7 @@ const TextOverlay = styled(Flex)`
 const NodeCardView = ({ description, host, image, nickname, nodeClicked, pubkey, ...rest }) => (
   <CardWithBg src={image} {...rest} onClick={() => nodeClicked(`${pubkey}@${host}`)}>
     <GradientOverlay />
-    <TextOverlay justifyContent="center" alignItems="center">
+    <TextOverlay alignItems="center" justifyContent="center">
       <Heading.h1 fontWeight="normal" textAlign="center">
         {nickname}
       </Heading.h1>
@@ -58,7 +58,7 @@ NodeCardView.propTypes = {
   image: PropTypes.string.isRequired,
   nickname: PropTypes.string.isRequired,
   nodeClicked: PropTypes.func.isRequired,
-  pubkey: PropTypes.string.isRequired
+  pubkey: PropTypes.string.isRequired,
 }
 
 export default React.memo(NodeCardView)
diff --git a/app/components/Channels/messages.js b/app/components/Channels/messages.js
index bdb8d11cc9e..2b44f4738a4 100644
--- a/app/components/Channels/messages.js
+++ b/app/components/Channels/messages.js
@@ -84,5 +84,5 @@ export default defineMessages({
   node_search_placeholder: 'Search the network',
   node_search_description: 'Search for nodes by name, public key, or paste their pubkey@host',
   node_search_results_header: '{count, plural, =0 {No results}  other {Search results ({count})}}',
-  node_suggestions_title: 'Suggested Nodes'
+  node_suggestions_title: 'Suggested Nodes',
 })
diff --git a/app/components/GlobalNotification/GlobalNotification.js b/app/components/GlobalNotification/GlobalNotification.js
index 78c68b4cdac..5e766bb1da2 100644
--- a/app/components/GlobalNotification/GlobalNotification.js
+++ b/app/components/GlobalNotification/GlobalNotification.js
@@ -16,7 +16,7 @@ const Wrapper = styled(Box)`
 class GlobalNotification extends React.Component {
   static propTypes = {
     notifications: PropTypes.array,
-    removeNotification: PropTypes.func.isRequired
+    removeNotification: PropTypes.func.isRequired,
   }
 
   render() {
@@ -32,24 +32,24 @@ class GlobalNotification extends React.Component {
     }
 
     return (
-      <Wrapper mt="22px" px={3} width={0.9} mx="auto">
+      <Wrapper mt="22px" mx="auto" px={3} width={0.9}>
         {notifications.map(item => (
           <Transition
-            native
             key={item.id}
-            items={item}
-            from={{ opacity: 0 }}
             enter={{ opacity: 1 }}
+            from={{ opacity: 0 }}
+            items={item}
             leave={{ opacity: 0 }}
+            native
           >
             {show =>
               show &&
               (springStyles => (
                 <animated.div style={springStyles}>
                   <Notification
-                    variant={item.variant}
-                    onClick={() => removeNotification(item.id)}
                     mb={2}
+                    onClick={() => removeNotification(item.id)}
+                    variant={item.variant}
                   >
                     {prepareMessage(item.message, item.variant)}
                   </Notification>
diff --git a/app/components/Home/CreateWalletButton.js b/app/components/Home/CreateWalletButton.js
index 381bd24d07d..dcf538e11d5 100644
--- a/app/components/Home/CreateWalletButton.js
+++ b/app/components/Home/CreateWalletButton.js
@@ -7,10 +7,10 @@ import PlusCircle from 'components/Icon/PlusCircle'
 import messages from './messages'
 
 const CreateWalletButton = ({ history, ...rest }) => (
-  <Button size="small" variant="secondary" onClick={() => history.push('/onboarding')} {...rest}>
+  <Button onClick={() => history.push('/onboarding')} size="small" variant="secondary" {...rest}>
     <Flex alignItem="center">
       <Text color="lightningOrange">
-        <PlusCircle width="22px" height="22px" />
+        <PlusCircle height="22px" width="22px" />
       </Text>
       <Text lineHeight="22px" ml={2}>
         <FormattedMessage {...messages.create_wallet_button_text} />
@@ -19,7 +19,7 @@ const CreateWalletButton = ({ history, ...rest }) => (
   </Button>
 )
 CreateWalletButton.propTypes = {
-  history: PropTypes.object.isRequired
+  history: PropTypes.object.isRequired,
 }
 
 export default CreateWalletButton
diff --git a/app/components/Home/DeleteWalletDialog.js b/app/components/Home/DeleteWalletDialog.js
index 526de6aa5e3..fb0253e9df0 100644
--- a/app/components/Home/DeleteWalletDialog.js
+++ b/app/components/Home/DeleteWalletDialog.js
@@ -19,26 +19,26 @@ const DialogWrapper = ({ intl, isOpen, walletDir, onDelete, onCancel }) => {
   // bind button disabled state to a form field or ignore it if we are dealing with a remote
   // wallet and don't have confirmation checkbox
   const DeleteWalletButton = withFieldState(checkboxFieldName)(({ fieldState, ...rest }) => (
-    <Button disabled={walletDir && !fieldState.value} {...rest} />
+    <Button isDisabled={walletDir && !fieldState.value} {...rest} />
   ))
 
   const buttons = (
     <>
-      <DeleteWalletButton variant="danger" type="submit">
+      <DeleteWalletButton type="submit" variant="danger">
         <FormattedMessage {...messages.delete_wallet_dialog_delete_text} />
       </DeleteWalletButton>
-      <Button variant="secondary" type="button" onClick={onCancel}>
+      <Button onClick={onCancel} type="button" variant="secondary">
         <FormattedMessage {...messages.delete_wallet_dialog_cancel_text} />
       </Button>
     </>
   )
 
   const header = (
-    <Flex flexDirection="column" alignItems="center">
+    <Flex alignItems="center" flexDirection="column">
       <Box color="superRed">
-        <Delete width={72} height={72} />
+        <Delete height={72} width={72} />
       </Box>
-      <Heading.h1 mt={4} mb={3}>
+      <Heading.h1 mb={3} mt={4}>
         <FormattedMessage {...messages.delete_wallet_dialog_header} />
       </Heading.h1>
     </Flex>
@@ -47,21 +47,21 @@ const DialogWrapper = ({ intl, isOpen, walletDir, onDelete, onCancel }) => {
   const handleSubmit = () => onDelete()
 
   return (
-    <DialogOverlay justifyContent="center" alignItems="center">
+    <DialogOverlay alignItems="center" justifyContent="center">
       <Form onSubmit={handleSubmit}>
-        <Dialog header={header} buttons={buttons} onClose={onCancel} width={640}>
+        <Dialog buttons={buttons} header={header} onClose={onCancel} width={640}>
           {walletDir && (
-            <Flex flexDirection="column" alignItems="center">
+            <Flex alignItems="center" flexDirection="column">
               <Flex alignItems="flex-start" flexDirection="column">
-                <Text mb={2} color="gray" width={550}>
+                <Text color="gray" mb={2} width={550}>
                   <FormattedMessage {...messages.delete_wallet_dialog_warning} />
                 </Text>
 
                 <Text color="gray">{walletDir}</Text>
               </Flex>
               <Checkbox
-                label={intl.formatMessage({ ...messages.delete_wallet_dialog_acknowledgement })}
                 field={checkboxFieldName}
+                label={intl.formatMessage({ ...messages.delete_wallet_dialog_acknowledgement })}
                 mt={4}
               />
             </Flex>
@@ -73,11 +73,11 @@ const DialogWrapper = ({ intl, isOpen, walletDir, onDelete, onCancel }) => {
 }
 
 DialogWrapper.propTypes = {
+  intl: intlShape.isRequired,
   isOpen: PropTypes.bool.isRequired,
-  onDelete: PropTypes.func.isRequired,
   onCancel: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired,
   walletDir: PropTypes.string,
-  intl: intlShape.isRequired
 }
 
 export default injectIntl(DialogWrapper)
diff --git a/app/components/Home/Home.js b/app/components/Home/Home.js
index 67b128dc355..db48897c43d 100644
--- a/app/components/Home/Home.js
+++ b/app/components/Home/Home.js
@@ -11,40 +11,40 @@ import WalletsMenu from './WalletsMenu'
 import WalletUnlocker from './WalletUnlocker'
 
 const NoMatch = ({ history, wallets }) => (
-  <Flex flexDirection="column" justifyContent="center" alignItems="center" css={{ height: '100%' }}>
+  <Flex alignItems="center" css={{ height: '100%' }} flexDirection="column" justifyContent="center">
     <NoWallets history={history} wallets={wallets} />
   </Flex>
 )
 NoMatch.propTypes = {
+  history: PropTypes.object.isRequired,
   wallets: PropTypes.array.isRequired,
-  history: PropTypes.object.isRequired
 }
 
 class Home extends React.Component {
   static propTypes = {
-    history: PropTypes.object.isRequired,
     activeWallet: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     activeWalletSettings: PropTypes.object,
+    clearStartLndError: PropTypes.func.isRequired,
     deleteWallet: PropTypes.func.isRequired,
+    history: PropTypes.object.isRequired,
+    isLightningGrpcActive: PropTypes.bool.isRequired,
+    isStartingLnd: PropTypes.bool,
+    isUnlockingWallet: PropTypes.bool,
+    isWalletUnlockerGrpcActive: PropTypes.bool.isRequired,
     lndConnect: PropTypes.string,
-    startLndError: PropTypes.object,
-    startingLnd: PropTypes.bool,
-    lightningGrpcActive: PropTypes.bool.isRequired,
-    walletUnlockerGrpcActive: PropTypes.bool.isRequired,
-    wallets: PropTypes.array.isRequired,
-    startLnd: PropTypes.func.isRequired,
-    stopLnd: PropTypes.func.isRequired,
+    putWallet: PropTypes.func.isRequired,
+    refreshLndConnectURI: PropTypes.func.isRequired,
     setActiveWallet: PropTypes.func.isRequired,
-    unlockWallet: PropTypes.func.isRequired,
     setIsWalletOpen: PropTypes.func.isRequired,
     setUnlockWalletError: PropTypes.func.isRequired,
-    clearStartLndError: PropTypes.func.isRequired,
-    putWallet: PropTypes.func.isRequired,
-    showNotification: PropTypes.func.isRequired,
-    refreshLndConnectURI: PropTypes.func.isRequired,
     showError: PropTypes.func.isRequired,
-    unlockingWallet: PropTypes.bool,
-    unlockWalletError: PropTypes.string
+    showNotification: PropTypes.func.isRequired,
+    startLnd: PropTypes.func.isRequired,
+    startLndError: PropTypes.object,
+    stopLnd: PropTypes.func.isRequired,
+    unlockWallet: PropTypes.func.isRequired,
+    unlockWalletError: PropTypes.string,
+    wallets: PropTypes.array.isRequired,
   }
 
   /**
@@ -73,21 +73,21 @@ class Home extends React.Component {
       deleteWallet,
       startLnd,
       startLndError,
-      startingLnd,
+      isStartingLnd,
       unlockWallet,
       wallets,
       setActiveWallet,
       clearStartLndError,
       showError,
       stopLnd,
-      lightningGrpcActive,
-      walletUnlockerGrpcActive,
+      isLightningGrpcActive,
+      isWalletUnlockerGrpcActive,
       setUnlockWalletError,
-      unlockingWallet,
+      isUnlockingWallet,
       unlockWalletError,
       putWallet,
       showNotification,
-      refreshLndConnectURI
+      refreshLndConnectURI,
     } = this.props
 
     return (
@@ -95,14 +95,14 @@ class Home extends React.Component {
         <Sidebar.medium pl={4} pt={40}>
           <Panel>
             <Panel.Header>
-              <ZapLogo width="70px" height="32px" />
+              <ZapLogo height="32px" width="70px" />
             </Panel.Header>
             <Panel.Body css={{ 'overflow-y': 'auto' }}>
               <WalletsMenu
-                wallets={wallets}
-                mt={30}
                 activeWallet={activeWallet}
+                mt={30}
                 setActiveWallet={setActiveWallet}
+                wallets={wallets}
               />
             </Panel.Body>
             <Panel.Footer>
@@ -126,20 +126,20 @@ class Home extends React.Component {
                 }
                 return (
                   <WalletLauncher
-                    wallet={wallet}
-                    startLnd={startLnd}
-                    stopLnd={stopLnd}
-                    startingLnd={startingLnd}
-                    lightningGrpcActive={lightningGrpcActive}
+                    key={wallet.id}
+                    clearStartLndError={clearStartLndError}
+                    deleteWallet={deleteWallet}
+                    isLightningGrpcActive={isLightningGrpcActive}
+                    isStartingLnd={isStartingLnd}
+                    isWalletUnlockerGrpcActive={isWalletUnlockerGrpcActive}
                     putWallet={putWallet}
-                    showNotification={showNotification}
                     refreshLndConnectURI={refreshLndConnectURI}
-                    walletUnlockerGrpcActive={walletUnlockerGrpcActive}
-                    startLndError={startLndError}
                     showError={showError}
-                    clearStartLndError={clearStartLndError}
-                    deleteWallet={deleteWallet}
-                    key={wallet.id}
+                    showNotification={showNotification}
+                    startLnd={startLnd}
+                    startLndError={startLndError}
+                    stopLnd={stopLnd}
+                    wallet={wallet}
                   />
                 )
               }}
@@ -154,13 +154,13 @@ class Home extends React.Component {
                 }
                 return (
                   <WalletUnlocker
-                    wallet={wallet}
-                    unlockWallet={unlockWallet}
-                    lightningGrpcActive={lightningGrpcActive}
+                    key={wallet.id}
+                    isLightningGrpcActive={isLightningGrpcActive}
+                    isUnlockingWallet={isUnlockingWallet}
                     setUnlockWalletError={setUnlockWalletError}
-                    unlockingWallet={unlockingWallet}
+                    unlockWallet={unlockWallet}
                     unlockWalletError={unlockWalletError}
-                    key={wallet.id}
+                    wallet={wallet}
                   />
                 )
               }}
diff --git a/app/components/Home/NoWallets.js b/app/components/Home/NoWallets.js
index f438b78d2f6..a01bf95bcd9 100644
--- a/app/components/Home/NoWallets.js
+++ b/app/components/Home/NoWallets.js
@@ -7,7 +7,7 @@ import CreateWalletButton from './CreateWalletButton'
 import messages from './messages'
 
 const NoWallets = ({ history, wallets }) => (
-  <Flex flexDirection="column" justifyContent="center" alignItems="center" css={{ height: '100%' }}>
+  <Flex alignItems="center" css={{ height: '100%' }} flexDirection="column" justifyContent="center">
     {wallets.length === 0 ? (
       <>
         <Heading.h4>
@@ -28,8 +28,8 @@ const NoWallets = ({ history, wallets }) => (
   </Flex>
 )
 NoWallets.propTypes = {
+  history: PropTypes.object.isRequired,
   wallets: PropTypes.array.isRequired,
-  history: PropTypes.object.isRequired
 }
 
 export default NoWallets
diff --git a/app/components/Home/WalletHeader.js b/app/components/Home/WalletHeader.js
index a78e78ee54b..6bc5fd196f4 100644
--- a/app/components/Home/WalletHeader.js
+++ b/app/components/Home/WalletHeader.js
@@ -6,14 +6,14 @@ import { WalletName } from 'components/Util'
 
 const WalletHeader = ({ wallet }) => (
   <Heading.h1>
-    <Textfit mode="single" min={16} max={60}>
+    <Textfit max={60} min={16} mode="single">
       <WalletName wallet={wallet} />
     </Textfit>
   </Heading.h1>
 )
 
 WalletHeader.propTypes = {
-  wallet: PropTypes.object.isRequired
+  wallet: PropTypes.object.isRequired,
 }
 
 export default WalletHeader
diff --git a/app/components/Home/WalletLauncher.js b/app/components/Home/WalletLauncher.js
index 359eb31049e..311975178f8 100644
--- a/app/components/Home/WalletLauncher.js
+++ b/app/components/Home/WalletLauncher.js
@@ -25,7 +25,7 @@ const autopilotDefaults = {
   autopilotMaxchannels: 5,
   autopilotMinchansize: 20000,
   autopilotMaxchansize: 16777215,
-  autopilotAllocation: 60
+  autopilotAllocation: 60,
 }
 
 // converts form format to db/lnd compatible format
@@ -98,36 +98,36 @@ const parseLndConnectURI = uri => {
     return {
       host: host && decodeURIComponent(host),
       cert: cert && decodeURIComponent(cert),
-      macaroon: macaroon && decodeURIComponent(macaroon)
+      macaroon: macaroon && decodeURIComponent(macaroon),
     }
   } catch (e) {
     return {
       host: '',
       cert: '',
-      macaroon: ''
+      macaroon: '',
     }
   }
 }
 
 class WalletLauncher extends React.Component {
   static propTypes = {
-    intl: intlShape.isRequired,
-    wallet: PropTypes.object.isRequired,
-    deleteWallet: PropTypes.func.isRequired,
-    startLnd: PropTypes.func.isRequired,
-    lightningGrpcActive: PropTypes.bool.isRequired,
-    walletUnlockerGrpcActive: PropTypes.bool.isRequired,
-    startLndError: PropTypes.object,
-    startingLnd: PropTypes.bool.isRequired,
     clearStartLndError: PropTypes.func.isRequired,
+    deleteWallet: PropTypes.func.isRequired,
+    history: PropTypes.shape({
+      push: PropTypes.func.isRequired,
+    }),
+    intl: intlShape.isRequired,
+    isLightningGrpcActive: PropTypes.bool.isRequired,
+    isStartingLnd: PropTypes.bool.isRequired,
+    isWalletUnlockerGrpcActive: PropTypes.bool.isRequired,
     putWallet: PropTypes.func.isRequired,
-    showNotification: PropTypes.func.isRequired,
+    refreshLndConnectURI: PropTypes.func.isRequired,
     showError: PropTypes.func.isRequired,
+    showNotification: PropTypes.func.isRequired,
+    startLnd: PropTypes.func.isRequired,
+    startLndError: PropTypes.object,
     stopLnd: PropTypes.func.isRequired,
-    refreshLndConnectURI: PropTypes.func.isRequired,
-    history: PropTypes.shape({
-      push: PropTypes.func.isRequired
-    })
+    wallet: PropTypes.object.isRequired,
   }
 
   componentDidMount() {
@@ -147,12 +147,12 @@ class WalletLauncher extends React.Component {
   componentDidUpdate(prevProps) {
     const {
       history,
-      lightningGrpcActive,
-      walletUnlockerGrpcActive,
+      isLightningGrpcActive,
+      isWalletUnlockerGrpcActive,
       startLndError,
       showError,
       clearStartLndError,
-      wallet
+      wallet,
     } = this.props
 
     // If we got lnd start errors, show as a global error.
@@ -162,12 +162,12 @@ class WalletLauncher extends React.Component {
     }
 
     // If the wallet unlocker became active, switch to the login screen
-    if (walletUnlockerGrpcActive && !prevProps.walletUnlockerGrpcActive) {
+    if (isWalletUnlockerGrpcActive && !prevProps.isWalletUnlockerGrpcActive) {
       history.push(`/home/wallet/${wallet.id}/unlock`)
     }
 
     // If an active wallet connection has been established, switch to the app.
-    if (lightningGrpcActive && !prevProps.lightningGrpcActive) {
+    if (isLightningGrpcActive && !prevProps.isLightningGrpcActive) {
       if (wallet.type === 'local') {
         history.push('/syncing')
       } else {
@@ -194,7 +194,7 @@ class WalletLauncher extends React.Component {
       showNotification,
       showError,
       intl,
-      wallet
+      wallet,
     } = this.props
     try {
       const { formApi } = this
@@ -202,7 +202,9 @@ class WalletLauncher extends React.Component {
       const { values } = formState
       let result = values
 
-      if (wallet.type !== 'local') {
+      if (wallet.type === 'local') {
+        result = formToWalletFormat(values)
+      } else {
         const hasHideLndConnectUri = typeof formApi.getValue('hideLndConnectUri') !== 'undefined'
         const lndconnectType = getLndConnectType(values.lndconnectUri)
         if (lndconnectType === LNDCONNECT_EMBEDDED) {
@@ -220,7 +222,7 @@ class WalletLauncher extends React.Component {
           const config = Object.assign({}, values, {
             ...parseLndConnectURI(values.lndconnectUri),
             lndconnectUri: undefined, // delete uris so the main process re-generates them
-            lndconnectQRCode: undefined
+            lndconnectQRCode: undefined,
           })
           const generatedConfig = formToWalletFormat(
             await refreshLndConnectURI(config) // wait for the config generate complete message from the main process
@@ -236,8 +238,6 @@ class WalletLauncher extends React.Component {
         if (hasHideLndConnectUri) {
           formApi.setValue('hideLndConnectUri', true)
         }
-      } else {
-        result = formToWalletFormat(values)
       }
 
       putWallet(result)
@@ -294,7 +294,7 @@ class WalletLauncher extends React.Component {
       if (getLndConnectType(wallet.lndconnectUri) === LNDCONNECT_EMBEDDED) {
         return !unsafeShallowCompare(clean(wallet), clean(formState.values), {
           name: '',
-          lndconnectUri: ''
+          lndconnectUri: '',
         })
       }
 
@@ -307,7 +307,7 @@ class WalletLauncher extends React.Component {
           name: '',
           cert: '',
           host: '',
-          macaroon: ''
+          macaroon: '',
         }
       )
     }
@@ -316,7 +316,7 @@ class WalletLauncher extends React.Component {
       ...autopilotDefaults,
       autopilot: '',
       alias: '',
-      name: ''
+      name: '',
     }
     // local node
     return !unsafeShallowCompare(
@@ -331,18 +331,18 @@ class WalletLauncher extends React.Component {
   }
 
   render() {
-    const { wallet, startingLnd } = this.props
+    const { wallet, isStartingLnd } = this.props
     const actionBarButtons = formState => (
       <>
-        <Button type="button" key="cancel" variant="secondary" mr={6} onClick={this.resetForm}>
+        <Button key="cancel" mr={6} onClick={this.resetForm} type="button" variant="secondary">
           <FormattedMessage {...messages.button_cancel} />
         </Button>
 
         <Button
-          type="submit"
           key="save"
+          isDisabled={formState.submits > 0 && formState.invalid}
+          type="submit"
           variant="normal"
-          disabled={formState.submits > 0 && formState.invalid}
         >
           <FormattedMessage {...messages.button_save} />
         </Button>
@@ -352,22 +352,22 @@ class WalletLauncher extends React.Component {
     const walletConverted = walletToFormFormat(wallet)
 
     return (
-      <Box css={{ height: '100%', 'overflow-y': 'overlay' }} pt={4} px={5} pb={6}>
-        <Form getApi={this.setFormApi} onSubmit={this.saveSettings} initialValues={walletConverted}>
+      <Box css={{ height: '100%', 'overflow-y': 'overlay' }} pb={6} pt={4} px={5}>
+        <Form getApi={this.setFormApi} initialValues={walletConverted} onSubmit={this.saveSettings}>
           {({ formState }) => (
             <Box>
-              <Flex mb={4} alignItems="center">
-                <Box width="75%" mr={3}>
+              <Flex alignItems="center" mb={4}>
+                <Box mr={3} width="75%">
                   <WalletHeader wallet={wallet} />
                 </Box>
-                <Flex ml="auto" justifyContent="flex-end" flexDirection="column">
+                <Flex flexDirection="column" justifyContent="flex-end" ml="auto">
                   <Button
-                    type="button"
-                    size="small"
+                    isDisabled={isStartingLnd}
+                    isProcessing={isStartingLnd}
                     ml={2}
-                    disabled={startingLnd}
-                    processing={startingLnd}
                     onClick={this.launchWallet}
+                    size="small"
+                    type="button"
                   >
                     <FormattedMessage {...messages.launch_wallet_button_text} />
                   </Button>
@@ -387,19 +387,19 @@ class WalletLauncher extends React.Component {
                 </>
               ) : (
                 <WalletSettingsFormRemote
-                  wallet={walletConverted}
                   isEmbeddedConnectionString={isEmbeddedLndConnectURI(wallet.lndconnectUri)}
+                  wallet={walletConverted}
                   {...parseLndConnectURI(wallet.lndconnectUri)}
                 />
               )}
 
-              <Text mt={4} fontWeight="normal">
+              <Text fontWeight="normal" mt={4}>
                 <FormattedMessage {...messages.section_delete_title} />
               </Text>
               <Bar my={2} />
 
               <Flex justifyContent="center" my={4}>
-                <Button size="small" onClick={this.handleDelete} type="button">
+                <Button onClick={this.handleDelete} size="small" type="button">
                   <FormattedMessage {...messages.delete_wallet_button_text} />
                 </Button>
               </Flex>
diff --git a/app/components/Home/WalletSettingsFormLocal.js b/app/components/Home/WalletSettingsFormLocal.js
index b65807f6ca2..3ba7db1b91b 100644
--- a/app/components/Home/WalletSettingsFormLocal.js
+++ b/app/components/Home/WalletSettingsFormLocal.js
@@ -9,11 +9,11 @@ import messages from './messages'
 
 class WalletSettingsFormLocal extends React.Component {
   static propTypes = {
-    intl: intlShape.isRequired,
     autopilotDefaults: PropTypes.object.isRequired,
     formApi: PropTypes.object.isRequired,
     formState: PropTypes.object.isRequired,
-    wallet: PropTypes.object.isRequired
+    intl: intlShape.isRequired,
+    wallet: PropTypes.object.isRequired,
   }
 
   resetAutopilotSettings = () => {
@@ -32,29 +32,28 @@ class WalletSettingsFormLocal extends React.Component {
       autopilotMaxchannels,
       autopilotMinchansize,
       autopilotMaxchansize,
-      autopilotAllocation
+      autopilotAllocation,
     } = wallet
 
     return (
       <>
-        <Box mb={4} as="section">
+        <Box as="section" mb={4}>
           <Text fontWeight="normal">
             <FormattedMessage {...messages.section_basic_title} />
           </Text>
-          <Bar mt={2} mb={4} />
+          <Bar mb={4} mt={2} />
 
-          <DataRow py={2} left={<FormattedMessage {...messages.chain} />} right={chain} />
-          <DataRow py={2} left={<FormattedMessage {...messages.network} />} right={network} />
+          <DataRow left={<FormattedMessage {...messages.chain} />} py={2} right={chain} />
+          <DataRow left={<FormattedMessage {...messages.network} />} py={2} right={network} />
         </Box>
 
-        <Box mb={4} as="section">
+        <Box as="section" mb={4}>
           <Text fontWeight="normal">
             <FormattedMessage {...messages.section_naming_title} />
           </Text>
-          <Bar mt={2} mb={4} />
+          <Bar mb={4} mt={2} />
 
           <DataRow
-            py={2}
             left={
               <>
                 <Label htmlFor="name" mb={2}>
@@ -65,23 +64,23 @@ class WalletSettingsFormLocal extends React.Component {
                 </Text>
               </>
             }
+            py={2}
             right={
               <Input
+                css={{ 'text-align': 'right' }}
                 field="name"
                 id="name"
+                justifyContent="right"
+                ml="auto"
                 placeholder={intl.formatMessage({
-                  ...messages.wallet_settings_name_placeholder
+                  ...messages.wallet_settings_name_placeholder,
                 })}
                 width={1}
-                ml="auto"
-                justifyContent="right"
-                css={{ 'text-align': 'right' }}
               />
             }
           />
 
           <DataRow
-            py={2}
             left={
               <>
                 <Label htmlFor="alias" mb={2}>
@@ -92,146 +91,147 @@ class WalletSettingsFormLocal extends React.Component {
                 </Text>
               </>
             }
+            py={2}
             right={
               <Input
+                css={{ 'text-align': 'right' }}
                 field="alias"
                 id="alias"
+                justifyContent="right"
+                ml="auto"
                 placeholder={intl.formatMessage({
-                  ...messages.wallet_settings_alias_placeholder
+                  ...messages.wallet_settings_alias_placeholder,
                 })}
                 width={1}
-                ml="auto"
-                justifyContent="right"
-                css={{ 'text-align': 'right' }}
               />
             }
           />
         </Box>
 
-        <Box mb={4} as="section">
+        <Box as="section" mb={4}>
           <DataRow
-            py={2}
-            mt={4}
             left={
               <Label htmlFor="autopilot">
                 <FormattedMessage {...messages.section_autopilot_title} />
               </Label>
             }
+            mt={4}
+            py={2}
             right={<Toggle field="autopilot" id="autopilot" />}
           />
 
-          <Bar mt={2} mb={4} />
+          <Bar mb={4} mt={2} />
 
           {formState.values.autopilot ? (
             <>
               <DataRow
-                py={2}
                 left={
                   <Label htmlFor="autopilotAllocation">
                     <FormattedMessage {...messages.wallet_settings_autopilotAllocation_label} />
                   </Label>
                 }
+                py={2}
                 right={
                   <Flex alignItems="center" justifyContent="flex-end">
                     <Range
                       field="autopilotAllocation"
                       id="autopilotAllocation"
                       initialValue={autopilotAllocation || autopilotDefaults.autopilotAllocation}
-                      min="0"
                       max="100"
-                      step="1"
-                      sliderWidthNumber={200}
+                      min="0"
                       ml="auto"
+                      sliderWidthNumber={200}
+                      step="1"
                     />
                     <Input
+                      css={{ 'text-align': 'right' }}
                       field="autopilotAllocation"
                       id="autopilotAllocation"
-                      type="number"
-                      min="0"
+                      justifyContent="right"
                       max="100"
+                      min="0"
+                      ml={2}
                       step="1"
+                      type="number"
                       width={70}
-                      ml={2}
-                      justifyContent="right"
-                      css={{ 'text-align': 'right' }}
                     />
                   </Flex>
                 }
               />
 
               <DataRow
-                py={2}
                 left={
                   <Label htmlFor="autopilotMaxchannels">
                     <FormattedMessage {...messages.wallet_settings_autopilotMaxchannels_label} />
                   </Label>
                 }
+                py={2}
                 right={
                   <Input
+                    css={{ 'text-align': 'right' }}
                     field="autopilotMaxchannels"
                     id="autopilotMaxchannels"
                     initialValue={autopilotMaxchannels || autopilotDefaults.autopilotMaxchannels}
-                    type="number"
+                    justifyContent="right"
                     min="1"
+                    ml="auto"
                     step="1"
+                    type="number"
                     width={150}
-                    ml="auto"
-                    justifyContent="right"
-                    css={{ 'text-align': 'right' }}
                   />
                 }
               />
 
               <DataRow
-                py={2}
                 left={
                   <Label htmlFor="autopilotMinchansize">
                     <FormattedMessage {...messages.wallet_settings_autopilotMinchansize_label} />
                   </Label>
                 }
+                py={2}
                 right={
                   <Input
+                    css={{ 'text-align': 'right' }}
                     field="autopilotMinchansize"
                     id="autopilotMinchansize"
-                    type="number"
-                    min={autopilotDefaults.autopilotMinchansize}
-                    max={autopilotDefaults.autopilotMaxchansize}
                     initialValue={autopilotMinchansize || autopilotDefaults.autopilotMinchansize}
+                    justifyContent="right"
+                    max={autopilotDefaults.autopilotMaxchansize}
+                    min={autopilotDefaults.autopilotMinchansize}
+                    ml="auto"
                     step="1"
+                    type="number"
                     width={150}
-                    ml="auto"
-                    justifyContent="right"
-                    css={{ 'text-align': 'right' }}
                   />
                 }
               />
 
               <DataRow
-                py={2}
                 left={
                   <Label htmlFor="autopilotMaxchansize">
                     <FormattedMessage {...messages.wallet_settings_autopilotMaxchansize_label} />
                   </Label>
                 }
+                py={2}
                 right={
                   <Input
+                    css={{ 'text-align': 'right' }}
                     field="autopilotMaxchansize"
                     id="autopilotMaxchansize"
-                    type="number"
-                    min={autopilotDefaults.autopilotMinchansize}
-                    max={autopilotDefaults.autopilotMaxchansize}
                     initialValue={autopilotMaxchansize || autopilotDefaults.autopilotMaxchansize}
+                    justifyContent="right"
+                    max={autopilotDefaults.autopilotMaxchansize}
+                    min={autopilotDefaults.autopilotMinchansize}
+                    ml="auto"
                     step="1"
+                    type="number"
                     width={150}
-                    ml="auto"
-                    justifyContent="right"
-                    css={{ 'text-align': 'right' }}
                   />
                 }
               />
 
               <Flex justifyContent="center" my={4}>
-                <Button type="button" size="small" onClick={this.resetAutopilotSettings}>
+                <Button onClick={this.resetAutopilotSettings} size="small" type="button">
                   <FormattedMessage {...messages.wallet_settings_reset_autopilot_button_text} />
                 </Button>
               </Flex>
diff --git a/app/components/Home/WalletSettingsFormRemote.js b/app/components/Home/WalletSettingsFormRemote.js
index 126e1eac5bf..eb47cc69174 100644
--- a/app/components/Home/WalletSettingsFormRemote.js
+++ b/app/components/Home/WalletSettingsFormRemote.js
@@ -10,7 +10,7 @@ import {
   Text,
   OpenDialogInput,
   RowLabel,
-  LndConnectionStringEditor
+  LndConnectionStringEditor,
 } from 'components/UI'
 
 import messages from './messages'
@@ -21,91 +21,91 @@ const WalletSettingsFormRemote = ({
   host,
   cert,
   macaroon,
-  isEmbeddedConnectionString
+  isEmbeddedConnectionString,
 }) => {
   return (
     <>
-      <Box mb={4} as="section">
+      <Box as="section" mb={4}>
         <Text fontWeight="normal">
           <FormattedMessage {...messages.section_basic_title} />
         </Text>
-        <Bar mt={2} mb={4} />
+        <Bar mb={4} mt={2} />
 
-        <DataRow py={2} left={<FormattedMessage {...messages.chain} />} right={wallet.chain} />
-        <DataRow py={2} left={<FormattedMessage {...messages.network} />} right={wallet.network} />
+        <DataRow left={<FormattedMessage {...messages.chain} />} py={2} right={wallet.chain} />
+        <DataRow left={<FormattedMessage {...messages.network} />} py={2} right={wallet.network} />
       </Box>
-      <Box mb={4} as="section">
+      <Box as="section" mb={4}>
         <Text fontWeight="normal">
           <FormattedMessage {...messages.section_connection_details} />
         </Text>
-        <Bar mt={2} mb={4} />
+        <Bar mb={4} mt={2} />
 
         {isEmbeddedConnectionString ? (
           <LndConnectionStringEditor
             field="lndconnectUri"
-            name="lndconnectUri"
             hideStringMessage={<FormattedMessage {...messages.hide_connection_string} />}
+            isRequired
             label={intl.formatMessage({
-              ...messages.connection_string
+              ...messages.connection_string,
             })}
+            name="lndconnectUri"
             placeholder={intl.formatMessage({
-              ...messages.connection_string
+              ...messages.connection_string,
             })}
             validateOnBlur
             validateOnChange
-            required
           />
         ) : (
           <>
             <DataRow
-              py={2}
               left={
                 <RowLabel
+                  descMessage={messages.hostname_description}
                   htmlFor="host"
                   nameMessage={messages.hostname_title}
-                  descMessage={messages.hostname_description}
                 />
               }
+              py={2}
               right={
                 <Input
+                  css={{ 'text-align': 'right' }}
                   field="host"
                   id="host"
+                  initialValue={host}
+                  justifyContent="right"
+                  ml="auto"
                   placeholder={intl.formatMessage({
-                    ...messages.hostname_title
+                    ...messages.hostname_title,
                   })}
                   width={300}
-                  ml="auto"
-                  initialValue={host}
-                  justifyContent="right"
-                  css={{ 'text-align': 'right' }}
                 />
               }
             />
             <DataRow
-              py={2}
               left={
                 <RowLabel
+                  descMessage={messages.cert_description}
                   htmlFor="cert"
                   nameMessage={messages.cert_title}
-                  descMessage={messages.cert_description}
                 />
               }
-              right={<OpenDialogInput field="cert" name="cert" initialValue={cert} width={300} />}
+              py={2}
+              right={<OpenDialogInput field="cert" initialValue={cert} name="cert" width={300} />}
             />
             <DataRow
-              py={2}
               left={
                 <RowLabel
+                  descMessage={messages.macaroon_description}
                   htmlFor="macaroon"
                   nameMessage={messages.macaroon_title}
-                  descMessage={messages.macaroon_description}
                 />
               }
+              py={2}
               right={
                 <OpenDialogInput
                   field="macaroon"
-                  name="macaroon"
                   initialValue={macaroon}
+                  name="macaroon"
                   width={300}
                 />
               }
@@ -113,32 +113,32 @@ const WalletSettingsFormRemote = ({
           </>
         )}
       </Box>
-      <Box mb={4} as="section">
+      <Box as="section" mb={4}>
         <Text fontWeight="normal">
           <FormattedMessage {...messages.section_naming_title} />
         </Text>
-        <Bar mt={2} mb={4} />
+        <Bar mb={4} mt={2} />
 
         <DataRow
-          py={2}
           left={
             <RowLabel
+              descMessage={messages.wallet_settings_name_description}
               htmlFor="name"
               nameMessage={messages.wallet_settings_name_label}
-              descMessage={messages.wallet_settings_name_description}
             />
           }
+          py={2}
           right={
             <Input
+              css={{ 'text-align': 'right' }}
               field="name"
               id="name"
+              justifyContent="right"
+              ml="auto"
               placeholder={intl.formatMessage({
-                ...messages.wallet_settings_name_placeholder
+                ...messages.wallet_settings_name_placeholder,
               })}
               width={300}
-              ml="auto"
-              justifyContent="right"
-              css={{ 'text-align': 'right' }}
             />
           }
         />
@@ -148,12 +148,12 @@ const WalletSettingsFormRemote = ({
 }
 
 WalletSettingsFormRemote.propTypes = {
-  intl: intlShape.isRequired,
-  wallet: PropTypes.object.isRequired,
-  host: PropTypes.string.isRequired,
   cert: PropTypes.string.isRequired,
+  host: PropTypes.string.isRequired,
+  intl: intlShape.isRequired,
+  isEmbeddedConnectionString: PropTypes.bool.isRequired,
   macaroon: PropTypes.string.isRequired,
-  isEmbeddedConnectionString: PropTypes.bool.isRequired
+  wallet: PropTypes.object.isRequired,
 }
 
 export default injectIntl(WalletSettingsFormRemote)
diff --git a/app/components/Home/WalletUnlocker.js b/app/components/Home/WalletUnlocker.js
index c22efa69464..253ecae2588 100644
--- a/app/components/Home/WalletUnlocker.js
+++ b/app/components/Home/WalletUnlocker.js
@@ -18,26 +18,26 @@ class WalletUnlocker extends React.Component {
   static displayName = 'WalletUnlocker'
 
   static propTypes = {
-    intl: intlShape.isRequired,
-    wallet: PropTypes.object.isRequired,
-    lightningGrpcActive: PropTypes.bool.isRequired,
     history: PropTypes.shape({
-      push: PropTypes.func.isRequired
+      push: PropTypes.func.isRequired,
     }),
-    unlockingWallet: PropTypes.bool,
-    unlockWalletError: PropTypes.string,
+    intl: intlShape.isRequired,
+    isLightningGrpcActive: PropTypes.bool.isRequired,
+    isUnlockingWallet: PropTypes.bool,
+    setUnlockWalletError: PropTypes.func.isRequired,
     unlockWallet: PropTypes.func.isRequired,
-    setUnlockWalletError: PropTypes.func.isRequired
+    unlockWalletError: PropTypes.string,
+    wallet: PropTypes.object.isRequired,
   }
 
   componentDidUpdate(prevProps) {
     const {
       wallet,
-      lightningGrpcActive,
+      isLightningGrpcActive,
       history,
       setUnlockWalletError,
-      unlockingWallet,
-      unlockWalletError
+      isUnlockingWallet,
+      unlockWalletError,
     } = this.props
 
     // Set the form error if we got an error unlocking.
@@ -47,7 +47,7 @@ class WalletUnlocker extends React.Component {
     }
 
     // Redirect to the app if the wallet was successfully unlocked.
-    if (!unlockingWallet && prevProps.unlockingWallet && !unlockWalletError) {
+    if (!isUnlockingWallet && prevProps.isUnlockingWallet && !unlockWalletError) {
       if (wallet.type === 'local') {
         history.push('/syncing')
       } else {
@@ -56,7 +56,7 @@ class WalletUnlocker extends React.Component {
     }
 
     // If an active wallet connection has been established, switch to the app.
-    if (lightningGrpcActive && !prevProps.lightningGrpcActive) {
+    if (isLightningGrpcActive && !prevProps.isLightningGrpcActive) {
       if (wallet.type === 'local') {
         history.push('/syncing')
       } else {
@@ -87,36 +87,36 @@ class WalletUnlocker extends React.Component {
   }
 
   render = () => {
-    const { intl, unlockingWallet, wallet } = this.props
+    const { intl, isUnlockingWallet, wallet } = this.props
 
     return (
       <Form
-        width={1}
+        key={`wallet-unlocker-form-${wallet.id}`}
         getApi={this.setFormApi}
         onSubmit={this.onSubmit}
         onSubmitFailure={this.onSubmitFailure}
-        key={`wallet-unlocker-form-${wallet.id}`}
+        pb={6}
         pt={4}
         px={5}
-        pb={6}
+        width={1}
       >
         {({ formState }) => (
           <>
             <WalletHeader wallet={wallet} />
 
             <PasswordInput
-              autoFocus
               field="password"
               id="password"
               label={<FormattedMessage {...messages.wallet_unlocker_password_label} />}
-              placeholder={intl.formatMessage({ ...messages.wallet_unlocker_password_placeholder })}
               my={3}
+              placeholder={intl.formatMessage({ ...messages.wallet_unlocker_password_placeholder })}
               validate={this.validatePassword}
               validateOnBlur
               validateOnChange={formState.invalid}
+              willAutoFocus
             />
 
-            <Button type="submit" disabled={unlockingWallet} processing={unlockingWallet}>
+            <Button isDisabled={isUnlockingWallet} isProcessing={isUnlockingWallet} type="submit">
               <FormattedMessage {...messages.wallet_unlocker_button_label} />
             </Button>
           </>
diff --git a/app/components/Home/WalletsMenu.js b/app/components/Home/WalletsMenu.js
index 7853f10baab..3dd5e307ea5 100644
--- a/app/components/Home/WalletsMenu.js
+++ b/app/components/Home/WalletsMenu.js
@@ -15,22 +15,22 @@ const WalletGroup = ({ setActiveWallet, title, wallets, ...rest }) => (
     {wallets.map(wallet => (
       <Text
         key={wallet.id}
-        mb={1}
         css={{
-          a: { opacity: 0.6, '&:hover': { opacity: 1 }, '&.selected': { opacity: 1 } }
+          a: { opacity: 0.6, '&:hover': { opacity: 1 }, '&.selected': { opacity: 1 } },
         }}
+        mb={1}
       >
         <NavLink
-          to={`/home/wallet/${wallet.id}`}
-          activeStyle={{ fontWeight: 'normal' }}
           activeClassName="selected"
+          activeStyle={{ fontWeight: 'normal' }}
           onClick={() => setActiveWallet(wallet.id)}
           style={{
             display: 'block',
             whiteSpace: 'nowrap',
             overflow: 'hidden',
-            textOverflow: 'ellipsis'
+            textOverflow: 'ellipsis',
           }}
+          to={`/home/wallet/${wallet.id}`}
         >
           <WalletName wallet={wallet} />
         </NavLink>
@@ -42,11 +42,11 @@ const WalletGroup = ({ setActiveWallet, title, wallets, ...rest }) => (
 WalletGroup.propTypes = {
   setActiveWallet: PropTypes.func.isRequired,
   title: PropTypes.string.isRequired,
-  wallets: PropTypes.array
+  wallets: PropTypes.array,
 }
 
 WalletGroup.defaultProps = {
-  wallets: []
+  wallets: [],
 }
 
 class WalletsMenu extends React.Component {
@@ -55,7 +55,7 @@ class WalletsMenu extends React.Component {
   static propTypes = {
     intl: intlShape.isRequired,
     setActiveWallet: PropTypes.func.isRequired,
-    wallets: PropTypes.array.isRequired
+    wallets: PropTypes.array.isRequired,
   }
 
   render() {
@@ -66,16 +66,16 @@ class WalletsMenu extends React.Component {
     return (
       <Box {...rest}>
         <WalletGroup
+          mb={5}
+          setActiveWallet={setActiveWallet}
           title={intl.formatMessage({ ...messages.wallets_menu_local_title })}
           wallets={localWallets}
-          setActiveWallet={setActiveWallet}
-          mb={5}
         />
         {otherWallets.length > 0 && (
           <WalletGroup
+            setActiveWallet={setActiveWallet}
             title={intl.formatMessage({ ...messages.wallets_menu_other_title })}
             wallets={otherWallets}
-            setActiveWallet={setActiveWallet}
           />
         )}
       </Box>
diff --git a/app/components/Home/messages.js b/app/components/Home/messages.js
index a8ad2b68937..2f2ad9c4380 100644
--- a/app/components/Home/messages.js
+++ b/app/components/Home/messages.js
@@ -50,5 +50,5 @@ export default defineMessages({
   hostname_description: 'Hostname and port of the Lnd gRPC interface.',
   macaroon_description: 'Path to the lnd macaroon file.',
   hide_connection_string: 'Hide connection string',
-  connection_string: 'Connection string'
+  connection_string: 'Connection string',
 })
diff --git a/app/components/Icon/AngleDown.js b/app/components/Icon/AngleDown.js
index a9304a26331..31c979a4eb2 100644
--- a/app/components/Icon/AngleDown.js
+++ b/app/components/Icon/AngleDown.js
@@ -1,8 +1,8 @@
 import React from 'react'
 
 const SvgAngleDown = props => (
-  <svg viewBox="6.295 8.295 12 7.41" width="1em" height="1em" {...props}>
-    <path fill="currentColor" d="M18.295 9.705l-1.41-1.41-4.59 4.58-4.59-4.58-1.41 1.41 6 6z" />
+  <svg height="1em" viewBox="6.295 8.295 12 7.41" width="1em" {...props}>
+    <path d="M18.295 9.705l-1.41-1.41-4.59 4.58-4.59-4.58-1.41 1.41 6 6z" fill="currentColor" />
   </svg>
 )
 
diff --git a/app/components/Icon/AngleLeft.js b/app/components/Icon/AngleLeft.js
index e066cc30b5a..07775fd7459 100644
--- a/app/components/Icon/AngleLeft.js
+++ b/app/components/Icon/AngleLeft.js
@@ -1,8 +1,8 @@
 import React from 'react'
 
 const SvgAngleLeft = props => (
-  <svg viewBox="8.59 6 7.41 12" width="1em" height="1em" {...props}>
-    <path fill="currentColor" d="M14.59 18L16 16.59 11.42 12 16 7.41 14.59 6l-6 6z" />
+  <svg height="1em" viewBox="8.59 6 7.41 12" width="1em" {...props}>
+    <path d="M14.59 18L16 16.59 11.42 12 16 7.41 14.59 6l-6 6z" fill="currentColor" />
   </svg>
 )
 
diff --git a/app/components/Icon/AngleRight.js b/app/components/Icon/AngleRight.js
index 2025fa9c932..10263ab850e 100644
--- a/app/components/Icon/AngleRight.js
+++ b/app/components/Icon/AngleRight.js
@@ -1,8 +1,8 @@
 import React from 'react'
 
 const SvgAngleRight = props => (
-  <svg viewBox="8.59 6 7.41 12" width="1em" height="1em" {...props}>
-    <path fill="currentColor" d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
+  <svg height="1em" viewBox="8.59 6 7.41 12" width="1em" {...props}>
+    <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="currentColor" />
   </svg>
 )
 
diff --git a/app/components/Icon/AngleUp.js b/app/components/Icon/AngleUp.js
index b02dc623727..3ba026c82e4 100644
--- a/app/components/Icon/AngleUp.js
+++ b/app/components/Icon/AngleUp.js
@@ -1,8 +1,8 @@
 import React from 'react'
 
 const SvgAngleUp = props => (
-  <svg viewBox="6.295 8.295 12 7.41" width="1em" height="1em" {...props}>
-    <path fill="currentColor" d="M6.295 14.295l1.41 1.41 4.59-4.58 4.59 4.58 1.41-1.41-6-6z" />
+  <svg height="1em" viewBox="6.295 8.295 12 7.41" width="1em" {...props}>
+    <path d="M6.295 14.295l1.41 1.41 4.59-4.58 4.59 4.58 1.41-1.41-6-6z" fill="currentColor" />
   </svg>
 )
 
diff --git a/app/components/Icon/ArrowLeft.js b/app/components/Icon/ArrowLeft.js
index 824d915ceaa..736b3c0ce08 100644
--- a/app/components/Icon/ArrowLeft.js
+++ b/app/components/Icon/ArrowLeft.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
 const SvgArrowLeft = props => (
-  <svg width="1em" height="1em" viewBox="0 0 16 12" {...props}>
+  <svg height="1em" viewBox="0 0 16 12" width="1em" {...props}>
     <path
       d="M1 6h14m-8.474 5L1 6l5.526-5"
       fill="none"
diff --git a/app/components/Icon/ArrowRight.js b/app/components/Icon/ArrowRight.js
index b29c88eb2eb..1dc80d0ec13 100644
--- a/app/components/Icon/ArrowRight.js
+++ b/app/components/Icon/ArrowRight.js
@@ -1,11 +1,11 @@
 import React from 'react'
 
 const SvgArrowRight = props => (
-  <svg width="1em" height="1em" viewBox="0 0 16 12" {...props}>
+  <svg height="1em" viewBox="0 0 16 12" width="1em" {...props}>
     <g
-      stroke="currentColor"
       fill="none"
       fillRule="evenodd"
+      stroke="currentColor"
       strokeLinecap="round"
       strokeLinejoin="round"
     >
diff --git a/app/components/Icon/BigArrowRight.js b/app/components/Icon/BigArrowRight.js
index 8c462bef431..356d07bf7c3 100644
--- a/app/components/Icon/BigArrowRight.js
+++ b/app/components/Icon/BigArrowRight.js
@@ -1,11 +1,11 @@
 import React from 'react'
 
 const SvgBigArrowRight = props => (
-  <svg width="1em" height="1em" viewBox="0 0 40 28" {...props}>
+  <svg height="1em" viewBox="0 0 40 28" width="1em" {...props}>
     <g
-      stroke="currentColor"
       fill="none"
       fillRule="evenodd"
+      stroke="currentColor"
       strokeLinecap="round"
       strokeLinejoin="round"
     >
diff --git a/app/components/Icon/Bitcoin.js b/app/components/Icon/Bitcoin.js
index c432360cefd..27c3636909e 100644
--- a/app/components/Icon/Bitcoin.js
+++ b/app/components/Icon/Bitcoin.js
@@ -1,11 +1,11 @@
 import React from 'react'
 
 const SvgBitcoin = props => (
-  <svg width="1em" height="1em" viewBox="0 0 32 33" {...props}>
+  <svg height="1em" viewBox="0 0 32 33" width="1em" {...props}>
     <path
       d="M15.85 32.1C7.096 32.1 0 25.004 0 16.25S7.096.4 15.85.4 31.7 7.496 31.7 16.25 24.604 32.1 15.85 32.1zm-4.3-23.95c-.05.05-.05.05.15-.1-.15.55-.3 1.15-.45 1.7-.05.1 0 .15.1.15.4.1.85.2 1.3.35.45.15.7.6.6 1-.6 2.6-1.25 5.15-1.9 7.7-.05.35-.35.55-.75.45-.35-.05-.75-.15-1.1-.25-.15 0-.2 0-.25.15-.15.4-.35.85-.55 1.3-.1.2-.15.35-.25.55 1.2.3 2.35.6 3.5.9 0 .1-.05.15-.05.2-.25.8-.45 1.65-.65 2.5-.05.1-.05.15.1.2.5.1 1 .2 1.5.35.15.05.15 0 .2-.1.1-.45.25-.9.35-1.35.1-.45.25-.9.35-1.35.45.1.85.2 1.25.3.1.05.05.1.05.2-.25.8-.45 1.65-.65 2.5-.05.1-.05.15.1.2.45.1.95.25 1.4.35.25.1.25.05.3-.15.2-.8.4-1.65.6-2.45.05-.15.15-.2.3-.15 1 .15 2 .25 3.05.1.8-.1 1.5-.45 2.05-1.1.45-.55.7-1.15.9-1.85.15-.55.2-1.15.1-1.7-.2-.7-.6-1.25-1.2-1.7-.2-.15-.4-.25-.6-.4.1 0 .15-.05.2-.05.4-.15.8-.35 1.1-.65.4-.4.6-.9.75-1.45.2-.8.15-1.6-.3-2.35-.35-.5-.8-.9-1.3-1.2l-1.65-.75c-.15-.05-.2-.1-.15-.25.1-.25.15-.5.2-.75.15-.6.3-1.2.45-1.85-.05 0-.05-.05-.1-.05-.55-.15-1.05-.25-1.55-.4-.1-.05-.15 0-.15.1l-.15.6c-.2.65-.35 1.25-.5 1.9-.05.05-.1.15-.15.15-.4-.1-.85-.2-1.25-.3.05-.1.05-.15.05-.2.2-.8.4-1.65.6-2.45.05-.1.05-.15-.1-.2-.5-.1-.95-.2-1.45-.35-.15-.05-.2 0-.25.15-.2.85-.4 1.65-.6 2.5-.05.15-.1.2-.25.15-.55-.15-1.1-.25-1.65-.4-.55-.15-1.1-.25-1.65-.4zM14.1 20.5c.2-.75.35-1.45.55-2.15.1-.5.25-.95.35-1.45.05-.15.05-.2.2-.15 1 .2 2.05.4 2.95.9.4.25.8.5 1.05.9.55.8.15 2.05-.8 2.35-.55.2-1.1.2-1.7.15-.85-.05-1.7-.3-2.5-.5 0 0-.05-.05-.1-.05zm4.2-5.1c-.8 0-1.45-.15-2.2-.25-.2-.05-.35-.1-.55-.15-.1-.05-.15-.1-.1-.2.3-1.05.55-2.05.8-3.1.05-.15.1-.2.25-.15.75.2 1.45.35 2.15.65.45.2.9.5 1.15.95.5.85 0 1.95-.95 2.15-.2.05-.45.1-.55.1z"
-      fillRule="nonzero"
       fill="#F5B300"
+      fillRule="nonzero"
     />
   </svg>
 )
diff --git a/app/components/Icon/Btcpay.js b/app/components/Icon/Btcpay.js
index 9d8e195dcd6..233e5bd2371 100644
--- a/app/components/Icon/Btcpay.js
+++ b/app/components/Icon/Btcpay.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
 const SvgBtcpay = props => (
-  <svg width="1em" height="1em" viewBox="0 0 400 400" {...props}>
+  <svg height="1em" viewBox="0 0 400 400" width="1em" {...props}>
     <g fillRule="evenodd">
       <path
         d="M132.759 62.5c-.022.055-.104.809-.182 1.676l-.141 1.577.582-1.122c.677-1.305.752-2.231.182-2.231-.22 0-.418.045-.441.1m60.631 6.548c.357.356.769.526.917.378.149-.148.005-.437-.319-.642-.945-.597-1.301-.44-.598.264M132.537 78.6c.002 1.76.072 2.43.156 1.489.085-.94.084-2.38-.002-3.2-.086-.819-.155-.049-.154 1.711M244.19 93.048c.357.356.769.526.917.378.149-.148.005-.437-.319-.642-.945-.597-1.301-.44-.598.264m4.062 1.943c.128.335.484.609.791.609.781 0 .693-.299-.234-.795-.645-.346-.748-.311-.557.186m-79.84 11.509c.015 11.431.602 11.333 1.007-.167.259-7.337.364-8.243.936-8.067.476.147.442.034-.131-.433-1.772-1.444-1.825-1.19-1.812 8.667M210 117c.274.33.701.586.949.568.281-.019.262-.108-.051-.234-.277-.111-.401-.367-.277-.568.124-.201-.076-.366-.446-.366-.553 0-.584.107-.175.6m32.8 15.757c0 .197.27.461.6.588.365.14.6 0 .6-.358a.595.595 0 0 0-.6-.587c-.33 0-.6.161-.6.357m2 1.071c0 .315.343.572.763.572.561 0 .708.208.557.786-.113.432-.322.748-.463.703-.477-.153-2.211 1.29-1.911 1.59.164.164.441.066.616-.217.384-.622 2.314-1.662 3.084-1.662.644 0 .748-1.033.141-1.408-1.149-.71-2.787-.924-2.787-.364M180.4 171.2c0 .22.27.4.6.4.33 0 .6.21.6.467 0 .256.116.351.257.209.298-.297-.585-1.476-1.106-1.476-.193 0-.351.18-.351.4m3.2 1.81c0 .446 1.199 1.457 1.567 1.322.197-.073-.074-.455-.604-.851-.53-.395-.963-.607-.963-.471m4.232 2.939c-.154.248-.089.451.144.451.233 0 .424.27.424.6 0 .33.354.6.787.6.535 0 .714-.192.559-.598-.127-.328-.38-.505-.563-.391-.184.113-.5-.091-.703-.454-.252-.45-.458-.516-.648-.208m32.703 23.494c-.647.988-.646 1.063.036 1.445.396.221 1.059.742 1.474 1.157.415.415.935.755 1.155.755.22 0 .4.18.4.4 0 .22.278.4.619.4.787 0-.518-1.967-1.319-1.987-.275-.007-.5-.268-.5-.58 0-.311-.188-.629-.418-.706-.23-.076-.448-.541-.485-1.033-.085-1.126-.131-1.119-.962.149m5.165 4.589c.385.224.7.669.7.988 0 .6.477.77.92.327.272-.272-1.423-1.755-1.983-1.735-.185.007-.022.196.363.42m7.9 5.959c0 .225.18.409.4.409.22 0 .4.27.4.6 0 .33.27.6.6.6.906 0 .721-.629-.4-1.363-.55-.361-1-.471-1-.246m10.8 7.806c0 .255 1.534 1.803 1.787 1.803.104 0 .1-.229-.007-.509-.199-.516-1.78-1.667-1.78-1.294M178.4 231c0 .33.191.6.424.6.233 0 .321-.165.197-.366-.124-.201 0-.457.277-.568.303-.122.224-.215-.198-.234-.385-.018-.7.238-.7.568m85.5 1.265c.275.111.5.457.5.768 0 .593.482.752.927.307.296-.296-.917-1.324-1.527-1.296-.22.011-.175.11.1.221m3.3 2.286c0 .07.336.514.747.988.782.901 1.653 1.144 1.653.461 0-.22-.27-.4-.6-.4-.33 0-.6-.161-.6-.357 0-.197-.27-.461-.6-.588-.33-.126-.6-.173-.6-.104m-96.74 2.229c.172.516.721.608.77.13.016-.16-.186-.362-.45-.45-.264-.088-.408.056-.32.32m101.94 2.42c0 .22.27.4.6.4.33 0 .6-.18.6-.4 0-.22-.27-.4-.6-.4-.33 0-.6.18-.6.4m14 9.813c0 .323.27.587.6.587.33 0 .6-.161.6-.357 0-.197-.27-.461-.6-.588-.365-.14-.6 0-.6.358m-61.6.816c0 .422 1.102 1.335 1.333 1.104.126-.125-.02-.477-.323-.781-.577-.576-1.01-.715-1.01-.323m3.6 2.971c0 .22.27.4.6.4.33 0 .6-.18.6-.4 0-.22-.27-.4-.6-.4-.33 0-.6.18-.6.4m8.255 6.2c.127.33.391.6.588.6.196 0 .357-.27.357-.6 0-.33-.264-.6-.587-.6-.358 0-.498.235-.358.6m4.245 9.665c-.693.279-.627.802.1.802.33 0 .6-.24.6-.534 0-.293-.045-.519-.1-.501-.055.017-.325.122-.6.233m-17.033 8.002c-.461.46-.292.933.333.933.33 0 .6-.27.6-.6 0-.625-.473-.794-.933-.333M219.6 279c-.408.491-.38.6.151.6.357 0 .649-.27.649-.6 0-.33-.068-.6-.151-.6-.083 0-.375.27-.649.6m-12.8 6c-.408.491-.38.6.151.6.357 0 .649-.27.649-.6 0-.33-.068-.6-.151-.6-.083 0-.375.27-.649.6m-38.4 12.12c0 5.341.1 6.48.57 6.48.478 0 .534-.985.35-6.1-.297-8.258-.92-8.515-.92-.38m12.8-.12c-.408.491-.38.6.151.6.357 0 .649-.27.649-.6 0-.33-.068-.6-.151-.6-.083 0-.375.27-.649.6m83.2 1.787c0 .214.3.273.666.132.483-.185.576-.11.338.275-.218.352-.173.434.134.244.73-.451.539-1.038-.338-1.038-.44 0-.8.174-.8.387m-8 4.2c0 .358.235.498.6.358.33-.127.6-.391.6-.588 0-.196-.27-.357-.6-.357-.33 0-.6.264-.6.587m-4 2.013c0 .33.161.6.357.6.197 0 .461-.27.588-.6.14-.365 0-.6-.358-.6a.595.595 0 0 0-.587.6m-8.8 4c0 .33.191.6.424.6.233 0 .32-.166.195-.37-.126-.203.088-.452.476-.553.537-.14.49-.195-.195-.231-.554-.028-.9.185-.9.554m-4 2c0 .33.18.6.4.6.22 0 .4-.27.4-.6 0-.33-.18-.6-.4-.6-.22 0-.4.27-.4.6m-8.133 3.667c-.486.486-.277.912.333.678.33-.127.6-.391.6-.588 0-.419-.551-.473-.933-.09m-5.067 2.12c0 .214.3.273.666.132.483-.185.576-.11.338.275-.218.352-.173.434.134.244.73-.451.539-1.038-.338-1.038-.44 0-.8.174-.8.387m-2 1.178c0 .406 1.023.346 1.455-.087.153-.153-.112-.278-.588-.278-.477 0-.867.164-.867.365m-6 3.068c0 .349.214.562.475.475.742-.247.865-1.108.158-1.108a.635.635 0 0 0-.633.633m-20.957 10c-.15.39-.061.573.232.475.598-.199.927-1.108.401-1.108-.215 0-.5.285-.633.633m-13.043 6.016c0 .531.109.559.6.151.33-.274.6-.566.6-.649 0-.083-.27-.151-.6-.151-.33 0-.6.292-.6.649m-4 1.984c0 .707.861.584 1.108-.158.087-.261-.126-.475-.475-.475a.635.635 0 0 0-.633.633m-12.919 5.9c-.113.294.048.534.357.534s.562-.24.562-.534c0-.293-.161-.533-.357-.533-.197 0-.45.24-.562.533"
diff --git a/app/components/Icon/ChainLink.js b/app/components/Icon/ChainLink.js
index 949be522d90..297995f2c23 100644
--- a/app/components/Icon/ChainLink.js
+++ b/app/components/Icon/ChainLink.js
@@ -2,15 +2,15 @@ import React from 'react'
 
 const SvgChainLink = props => (
   <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 24 24"
+    className="chain-link_svg__feather chain-link_svg__feather-link"
     fill="none"
+    height="1em"
     stroke="currentColor"
-    strokeWidth={2}
     strokeLinecap="round"
     strokeLinejoin="round"
-    className="chain-link_svg__feather chain-link_svg__feather-link"
+    strokeWidth={2}
+    viewBox="0 0 24 24"
+    width="1em"
     {...props}
   >
     <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" />
diff --git a/app/components/Icon/Channels.js b/app/components/Icon/Channels.js
index 02d1abe8011..817eca4d89a 100644
--- a/app/components/Icon/Channels.js
+++ b/app/components/Icon/Channels.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
 const SvgChannels = props => (
-  <svg width="1em" height="1em" viewBox="0 0 22 26" {...props}>
+  <svg height="1em" viewBox="0 0 22 26" width="1em" {...props}>
     <g fill="currentColor" fillRule="evenodd">
       <path d="M13.148 22.728c-1.427 0-2.588-1.151-2.588-2.564 0-1.439 1.102-2.564 2.508-2.564.642 0 1.061.245 1.418.517a.422.422 0 1 1-.505.676c-.342-.253-.58-.346-.913-.346-.932 0-1.662.753-1.662 1.717 0 .948.781 1.717 1.742 1.717.373 0 .753-.126 1.045-.346a.426.426 0 0 1 .592.085.421.421 0 0 1-.085.591c-.441.331-.992.517-1.552.517M18.628 22.728c-.549 0-1.076-.178-1.525-.517a.422.422 0 0 1-.086-.591.42.42 0 0 1 .593-.085c.3.228.653.346 1.018.346a1.718 1.718 0 0 0 0-3.434c-.425 0-.978.151-1.232.346a.422.422 0 1 1-.507-.676c.471-.356 1.232-.517 1.74-.517a2.567 2.567 0 0 1 2.562 2.564 2.567 2.567 0 0 1-2.563 2.564" />
       <path d="M17.854 21.085h-4.23a.42.42 0 0 1-.424-.422.42.42 0 0 1 .423-.423h4.23a.42.42 0 0 1 .424.423.42.42 0 0 1-.423.422" />
diff --git a/app/components/Icon/Check.js b/app/components/Icon/Check.js
index 8a3bdfbbb74..f0b4008aff9 100644
--- a/app/components/Icon/Check.js
+++ b/app/components/Icon/Check.js
@@ -2,15 +2,15 @@ import React from 'react'
 
 const SvgCheck = props => (
   <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 24 24"
+    className="check_svg__feather check_svg__feather-check"
     fill="none"
+    height="1em"
     stroke="currentColor"
-    strokeWidth={2}
     strokeLinecap="round"
     strokeLinejoin="round"
-    className="check_svg__feather check_svg__feather-check"
+    strokeWidth={2}
+    viewBox="0 0 24 24"
+    width="1em"
     {...props}
   >
     <path d="M20 6L9 17l-5-5" />
diff --git a/app/components/Icon/CheckCircle.js b/app/components/Icon/CheckCircle.js
index 970c55169f1..a0604dcff5e 100644
--- a/app/components/Icon/CheckCircle.js
+++ b/app/components/Icon/CheckCircle.js
@@ -2,15 +2,15 @@ import React from 'react'
 
 const SvgCheckCircle = props => (
   <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 24 24"
+    className="check-circle_svg__feather check-circle_svg__feather-check-circle"
     fill="none"
+    height="1em"
     stroke="currentColor"
-    strokeWidth={0.5}
     strokeLinecap="round"
     strokeLinejoin="round"
-    className="check-circle_svg__feather check-circle_svg__feather-check-circle"
+    strokeWidth={0.5}
+    viewBox="0 0 24 24"
+    width="1em"
     {...props}
   >
     <path d="M22 11.07V12a10 10 0 1 1-5.93-9.14" />
diff --git a/app/components/Icon/Circle.js b/app/components/Icon/Circle.js
index 9adfce97139..b7eba89b138 100644
--- a/app/components/Icon/Circle.js
+++ b/app/components/Icon/Circle.js
@@ -1,8 +1,8 @@
 import React from 'react'
 
 const SvgCircle = props => (
-  <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
-    <circle fill="currentColor" cx={12} cy={12} r={8} />
+  <svg height="1em" viewBox="0 0 24 24" width="1em" {...props}>
+    <circle cx={12} cy={12} fill="currentColor" r={8} />
   </svg>
 )
 
diff --git a/app/components/Icon/Clock.js b/app/components/Icon/Clock.js
index 1d1a29cdf43..7f934708b8e 100644
--- a/app/components/Icon/Clock.js
+++ b/app/components/Icon/Clock.js
@@ -2,15 +2,15 @@ import React from 'react'
 
 const SvgClock = props => (
   <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 24 24"
+    className="clock_svg__feather clock_svg__feather-clock"
     fill="none"
+    height="1em"
     stroke="currentColor"
-    strokeWidth={2}
     strokeLinecap="round"
     strokeLinejoin="round"
-    className="clock_svg__feather clock_svg__feather-clock"
+    strokeWidth={2}
+    viewBox="0 0 24 24"
+    width="1em"
     {...props}
   >
     <circle cx={12} cy={12} r={10} />
diff --git a/app/components/Icon/Close.js b/app/components/Icon/Close.js
index e651126358f..8191453d6e9 100644
--- a/app/components/Icon/Close.js
+++ b/app/components/Icon/Close.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
 const SvgClose = props => (
-  <svg width="1em" height="1em" viewBox="0 0 10 10" {...props}>
+  <svg height="1em" viewBox="0 0 10 10" width="1em" {...props}>
     <g fill="currentColor" fillRule="evenodd">
       <path d="M7.744 1.077a.833.833 0 1 1 1.179 1.179L2.256 8.923a.833.833 0 1 1-1.179-1.179l6.667-6.667z" />
       <path d="M1.077 2.256a.833.833 0 1 1 1.179-1.179l6.667 6.667a.833.833 0 1 1-1.179 1.179L1.077 2.256z" />
diff --git a/app/components/Icon/CloudLightning.js b/app/components/Icon/CloudLightning.js
index f897fc7924f..ffc1b35bd31 100644
--- a/app/components/Icon/CloudLightning.js
+++ b/app/components/Icon/CloudLightning.js
@@ -2,15 +2,15 @@ import React from 'react'
 
 const SvgCloudLightning = props => (
   <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 24 24"
+    className="cloud-lightning_svg__feather cloud-lightning_svg__feather-cloud-lightning"
     fill="none"
+    height="1em"
     stroke="currentColor"
-    strokeWidth={0.5}
     strokeLinecap="round"
     strokeLinejoin="round"
-    className="cloud-lightning_svg__feather cloud-lightning_svg__feather-cloud-lightning"
+    strokeWidth={0.5}
+    viewBox="0 0 24 24"
+    width="1em"
     {...props}
   >
     <path d="M19 16.9A5 5 0 0 0 18 7h-1.26a8 8 0 1 0-11.62 9" />
diff --git a/app/components/Icon/Cloudbolt.js b/app/components/Icon/Cloudbolt.js
index 0bd59af0ce9..7c7104f1ea9 100644
--- a/app/components/Icon/Cloudbolt.js
+++ b/app/components/Icon/Cloudbolt.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
 const SvgCloudbolt = props => (
-  <svg width="1em" height="1em" viewBox="0 0 79.536 79.536" {...props}>
+  <svg height="1em" viewBox="0 0 79.536 79.536" width="1em" {...props}>
     <path
       className="cloudbolt_svg__load-draw-svg"
       d="M78.967 29.396c0 8.124-6.582 14.7-14.706 14.7H9.145c-4.735 0-8.575-1.799-8.575-6.54a8.576 8.576 0 0 1 8.575-8.575c.857 0 1.675.171 2.47.409 0-.067-.021-.132-.021-.202 0-5.525 4.479-9.999 10.004-9.999.228 0 .456.052.687.067-.013-.233-.075-.451-.075-.684C22.209 8.313 30.522 0 40.788 0c9.264 0 16.896 6.814 18.289 15.689 1.61-.616 3.351-.991 5.184-.991 8.124 0 14.706 6.581 14.706 14.698zm-29.79 18.222H34.504c-4.306 4.329-11.283 11.34-11.363 11.34h11.757L23.146 79.536l26.45-23.52h-8.818l8.399-8.398z"
diff --git a/app/components/Icon/Contacts.js b/app/components/Icon/Contacts.js
index 7960e16f7ff..cef477ffc31 100644
--- a/app/components/Icon/Contacts.js
+++ b/app/components/Icon/Contacts.js
@@ -1,15 +1,15 @@
 import React from 'react'
 
 const SvgContacts = props => (
-  <svg width="1em" height="1em" viewBox="0 0 20 15" {...props}>
+  <svg height="1em" viewBox="0 0 20 15" width="1em" {...props}>
     <g
-      transform="translate(1 1)"
-      stroke="currentColor"
-      strokeWidth={0.8}
       fill="none"
       fillRule="evenodd"
+      stroke="currentColor"
       strokeLinecap="round"
       strokeLinejoin="round"
+      strokeWidth={0.8}
+      transform="translate(1 1)"
     >
       <path d="M13.5 14v-1.458c0-1.611-1.511-2.917-3.375-2.917h-6.75C1.511 9.625 0 10.931 0 12.542V14" />
       <ellipse cx={6.75} cy={3.063} rx={3.15} ry={3.063} />
diff --git a/app/components/Icon/Copy.js b/app/components/Icon/Copy.js
index 0191bbd8856..28b81369998 100644
--- a/app/components/Icon/Copy.js
+++ b/app/components/Icon/Copy.js
@@ -2,18 +2,18 @@ import React from 'react'
 
 const SvgCopy = props => (
   <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 24 24"
+    className="copy_svg__feather copy_svg__feather-copy"
     fill="none"
+    height="1em"
     stroke="currentColor"
-    strokeWidth={2}
     strokeLinecap="round"
     strokeLinejoin="round"
-    className="copy_svg__feather copy_svg__feather-copy"
+    strokeWidth={2}
+    viewBox="0 0 24 24"
+    width="1em"
     {...props}
   >
-    <rect x={9} y={9} width={13} height={13} rx={2} ry={2} />
+    <rect height={13} rx={2} ry={2} width={13} x={9} y={9} />
     <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
   </svg>
 )
diff --git a/app/components/Icon/Delete.js b/app/components/Icon/Delete.js
index 57730e884b2..633d6dfeb54 100644
--- a/app/components/Icon/Delete.js
+++ b/app/components/Icon/Delete.js
@@ -1,14 +1,14 @@
 import React from 'react'
 
 const SvgDelete = props => (
-  <svg width="1em" height="1em" viewBox="0 0 55 55" {...props}>
+  <svg height="1em" viewBox="0 0 55 55" width="1em" {...props}>
     <defs>
       <path
-        id="delete_svg__a"
         d="M9 9L0 0l9 9 9-9-7.555 7.555L9 9l1.445 1.445L18 18 9 9l-9 9 9-9z"
+        id="delete_svg__a"
       />
     </defs>
-    <g fill="none" fillRule="evenodd" transform="translate(1 1)" stroke="currentColor">
+    <g fill="none" fillRule="evenodd" stroke="currentColor" transform="translate(1 1)">
       <use
         strokeLinecap="round"
         strokeLinejoin="round"
diff --git a/app/components/Icon/Error.js b/app/components/Icon/Error.js
index dfbb72b3833..12ff55041da 100644
--- a/app/components/Icon/Error.js
+++ b/app/components/Icon/Error.js
@@ -1,11 +1,11 @@
 import React from 'react'
 
 const SvgError = props => (
-  <svg width="1em" height="1em" viewBox="0 0 17 17" {...props}>
+  <svg height="1em" viewBox="0 0 17 17" width="1em" {...props}>
     <path
+      d="M9.512 8.333l1.91-1.91a.833.833 0 0 0-1.178-1.179l-1.91 1.91-1.911-1.91a.833.833 0 1 0-1.179 1.179l1.91 1.91-1.91 1.911a.833.833 0 1 0 1.179 1.179l1.91-1.911 1.911 1.91a.833.833 0 0 0 1.179-1.178l-1.911-1.91zm-1.179 8.334A8.333 8.333 0 1 1 8.333 0a8.333 8.333 0 0 1 0 16.667z"
       fill="currentColor"
       fillRule="evenodd"
-      d="M9.512 8.333l1.91-1.91a.833.833 0 0 0-1.178-1.179l-1.91 1.91-1.911-1.91a.833.833 0 1 0-1.179 1.179l1.91 1.91-1.91 1.911a.833.833 0 1 0 1.179 1.179l1.91-1.911 1.911 1.91a.833.833 0 0 0 1.179-1.178l-1.911-1.91zm-1.179 8.334A8.333 8.333 0 1 1 8.333 0a8.333 8.333 0 0 1 0 16.667z"
     />
   </svg>
 )
diff --git a/app/components/Icon/ExternalLink.js b/app/components/Icon/ExternalLink.js
index 7df2a5d33e5..b0a34a09095 100644
--- a/app/components/Icon/ExternalLink.js
+++ b/app/components/Icon/ExternalLink.js
@@ -1,10 +1,10 @@
 import React from 'react'
 
 const SvgExternalLink = props => (
-  <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+  <svg height="1em" viewBox="0 0 24 24" width="1em" {...props}>
     <path
-      fill="currentColor"
       d="M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"
+      fill="currentColor"
     />
   </svg>
 )
diff --git a/app/components/Icon/Eye.js b/app/components/Icon/Eye.js
index e651c68d03b..fd61604ca2b 100644
--- a/app/components/Icon/Eye.js
+++ b/app/components/Icon/Eye.js
@@ -2,15 +2,15 @@ import React from 'react'
 
 const SvgEye = props => (
   <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 24 24"
+    className="eye_svg__feather eye_svg__feather-eye"
     fill="none"
+    height="1em"
     stroke="currentColor"
-    strokeWidth={2}
     strokeLinecap="round"
     strokeLinejoin="round"
-    className="eye_svg__feather eye_svg__feather-eye"
+    strokeWidth={2}
+    viewBox="0 0 24 24"
+    width="1em"
     {...props}
   >
     <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
diff --git a/app/components/Icon/FolderOpen.js b/app/components/Icon/FolderOpen.js
index 24559606859..8bb4e662d92 100644
--- a/app/components/Icon/FolderOpen.js
+++ b/app/components/Icon/FolderOpen.js
@@ -1,10 +1,10 @@
 import React from 'react'
 
 const SvgFolderOpen = props => (
-  <svg viewBox="0 0 50 50" width="1em" height="1em" {...props}>
+  <svg height="1em" viewBox="0 0 50 50" width="1em" {...props}>
     <path
-      fill="currentColor"
       d="M5 4C3.354 4 2 5.356 2 7v36c0 1.644 1.354 3 3 3h40c1.645 0 3-1.355 3-3V11c0-1.645-1.355-3-3-3H18c.087 0-.031 0-.275-.281-.245-.282-.546-.75-.86-1.25-.314-.501-.643-1.036-1.058-1.506C15.392 4.493 14.819 4 14 4H5zm0 2h9c-.06 0 .061.007.309.287.247.28.548.745.86 1.244.314.5.637 1.032 1.044 1.5.406.469.966.969 1.787.969h27c.563 0 1 .437 1 1v2.188A2.936 2.936 0 0 0 45 13H5c-.352 0-.685.074-1 .188V7c0-.564.436-1 1-1zm0 9h40c.565 0 1 .435 1 1v27c0 .563-.437 1-1 1H5c-.564 0-1-.436-1-1V16c0-.565.435-1 1-1z"
+      fill="currentColor"
     />
   </svg>
 )
diff --git a/app/components/Icon/Globe.js b/app/components/Icon/Globe.js
index b1cf5dd9e3e..5cace3f9316 100644
--- a/app/components/Icon/Globe.js
+++ b/app/components/Icon/Globe.js
@@ -2,15 +2,15 @@ import React from 'react'
 
 const SvgGlobe = props => (
   <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 24 24"
+    className="globe_svg__feather globe_svg__feather-globe"
     fill="none"
+    height="1em"
     stroke="currentColor"
-    strokeWidth={2}
     strokeLinecap="round"
     strokeLinejoin="round"
-    className="globe_svg__feather globe_svg__feather-globe"
+    strokeWidth={2}
+    viewBox="0 0 24 24"
+    width="1em"
     {...props}
   >
     <circle cx={12} cy={12} r={10} />
diff --git a/app/components/Icon/Help.js b/app/components/Icon/Help.js
index ccf6996ccdf..182d10ee41d 100644
--- a/app/components/Icon/Help.js
+++ b/app/components/Icon/Help.js
@@ -2,15 +2,15 @@ import React from 'react'
 
 const SvgHelp = props => (
   <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 24 24"
+    className="help_svg__feather help_svg__feather-life-buoy"
     fill="none"
+    height="1em"
     stroke="currentColor"
-    strokeWidth={2}
     strokeLinecap="round"
     strokeLinejoin="round"
-    className="help_svg__feather help_svg__feather-life-buoy"
+    strokeWidth={2}
+    viewBox="0 0 24 24"
+    width="1em"
     {...props}
   >
     <circle cx={12} cy={12} r={10} />
diff --git a/app/components/Icon/Help2.js b/app/components/Icon/Help2.js
index 2994ec346cb..3de72f97ab2 100644
--- a/app/components/Icon/Help2.js
+++ b/app/components/Icon/Help2.js
@@ -1,15 +1,15 @@
 import React from 'react'
 
 const SvgHelp2 = props => (
-  <svg width="1em" height="1em" viewBox="0 0 18 18" {...props}>
+  <svg height="1em" viewBox="0 0 18 18" width="1em" {...props}>
     <g
-      transform="translate(1 1)"
-      stroke="currentColor"
-      strokeWidth={0.8}
       fill="none"
       fillRule="evenodd"
+      stroke="currentColor"
       strokeLinecap="round"
       strokeLinejoin="round"
+      strokeWidth={0.8}
+      transform="translate(1 1)"
     >
       <circle cx={8} cy={8} r={8} />
       <circle cx={8} cy={8} r={3.2} />
diff --git a/app/components/Icon/IconPlus.js b/app/components/Icon/IconPlus.js
index fa6e5147a2c..f3f32e1356f 100644
--- a/app/components/Icon/IconPlus.js
+++ b/app/components/Icon/IconPlus.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
 const SvgIconPlus = props => (
-  <svg width="1em" height="1em" viewBox="0 0 18 18" {...props}>
+  <svg height="1em" viewBox="0 0 18 18" width="1em" {...props}>
     <g fill="none" fillRule="evenodd" stroke="currentColor" transform="translate(1 1)">
       <path d="M8.09 5v6M5 8.09h6" strokeLinecap="round" strokeLinejoin="round" />
       <circle cx={8} cy={8} r={8} />
diff --git a/app/components/Icon/LayoutCards.js b/app/components/Icon/LayoutCards.js
index 4b96ee322ce..c6f6d8a2321 100644
--- a/app/components/Icon/LayoutCards.js
+++ b/app/components/Icon/LayoutCards.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
 const SvgLayoutCards = props => (
-  <svg width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <svg height="1em" viewBox="0 0 16 16" width="1em" {...props}>
     <path
       d="M.5.5h6v6h-6zm0 9h6v6h-6zm9-9h6v6h-6zm0 9h6v6h-6z"
       fill="none"
diff --git a/app/components/Icon/LayoutList.js b/app/components/Icon/LayoutList.js
index dcac93931a5..2a646939670 100644
--- a/app/components/Icon/LayoutList.js
+++ b/app/components/Icon/LayoutList.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
 const SvgLayoutList = props => (
-  <svg width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <svg height="1em" viewBox="0 0 16 16" width="1em" {...props}>
     <path
       d="M.5.5h15v1H.5zm0 5h15v1H.5zm0 5h15v1H.5zm0 5h15v1H.5z"
       fill="currentColor"
diff --git a/app/components/Icon/Lightning.js b/app/components/Icon/Lightning.js
index e57028e4534..4bf71f299fa 100644
--- a/app/components/Icon/Lightning.js
+++ b/app/components/Icon/Lightning.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
 const SvgLightning = props => (
-  <svg width="1em" height="1em" viewBox="0 0 50 50" {...props}>
+  <svg height="1em" viewBox="0 0 50 50" width="1em" {...props}>
     <defs>
       <linearGradient id="lightning_svg__a" x1="0%" y1="0%" y2="100%">
         <stop offset="0%" stopColor="#FFBD59" />
@@ -9,10 +9,10 @@ const SvgLightning = props => (
       </linearGradient>
     </defs>
     <g fill="none" fillRule="evenodd">
-      <circle cx={25} cy={25} r={25} fill="url(#lightning_svg__a)" />
+      <circle cx={25} cy={25} fill="url(#lightning_svg__a)" r={25} />
       <path
-        stroke="currentColor"
         d="M26.483 22.591h6.276L22.12 39.261l2.67-11.34h-6.728L29.11 11.433l-2.628 11.158z"
+        stroke="currentColor"
       />
     </g>
   </svg>
diff --git a/app/components/Icon/LightningChannel.js b/app/components/Icon/LightningChannel.js
index 8186c9f0721..b4bd255e07d 100644
--- a/app/components/Icon/LightningChannel.js
+++ b/app/components/Icon/LightningChannel.js
@@ -1,12 +1,12 @@
 import React from 'react'
 
 const SvgLightningChannel = props => (
-  <svg width="1em" height="1em" viewBox="0 0 44 50" {...props}>
+  <svg height="1em" viewBox="0 0 44 50" width="1em" {...props}>
     <g fill="none" fillRule="evenodd">
-      <path fill="currentColor" d="M22 0l21.65 12.5v25L22 50 .35 37.5v-25z" />
+      <path d="M22 0l21.65 12.5v25L22 50 .35 37.5v-25z" fill="currentColor" />
       <path
-        stroke="#FD9800"
         d="M23.483 22.591h6.276L19.12 39.261l2.67-11.34h-6.728L26.11 11.433l-2.628 11.158z"
+        stroke="#FD9800"
       />
     </g>
   </svg>
diff --git a/app/components/Icon/Litecoin.js b/app/components/Icon/Litecoin.js
index 7a0ca367977..e9549c452ef 100644
--- a/app/components/Icon/Litecoin.js
+++ b/app/components/Icon/Litecoin.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
 const SvgLitecoin = props => (
-  <svg width="1em" height="1em" viewBox="0 0 50 50" {...props}>
+  <svg height="1em" viewBox="0 0 50 50" width="1em" {...props}>
     <defs>
       <linearGradient id="litecoin_svg__a" x1="0%" y1="0%" y2="100%">
         <stop offset="0%" stopColor="#FFBD59" />
@@ -9,12 +9,12 @@ const SvgLitecoin = props => (
       </linearGradient>
     </defs>
     <g fill="none" fillRule="evenodd">
-      <circle cx={25} cy={25} r={25} fill="url(#litecoin_svg__a)" />
+      <circle cx={25} cy={25} fill="url(#litecoin_svg__a)" r={25} />
       <path
+        d="M24.135 32.18l1.495-5.534 3.538-1.271.88-3.253-.03-.08-3.483 1.251L29.045 14h-7.117l-3.282 12.128-2.74.984L15 30.465l2.738-.983-1.934 7.147h18.942l1.214-4.448H24.135"
         stroke="currentColor"
         strokeLinecap="round"
         strokeLinejoin="round"
-        d="M24.135 32.18l1.495-5.534 3.538-1.271.88-3.253-.03-.08-3.483 1.251L29.045 14h-7.117l-3.282 12.128-2.74.984L15 30.465l2.738-.983-1.934 7.147h18.942l1.214-4.448H24.135"
       />
     </g>
   </svg>
diff --git a/app/components/Icon/LndLogo.js b/app/components/Icon/LndLogo.js
index 077eeb219bd..d0eb26d62ee 100644
--- a/app/components/Icon/LndLogo.js
+++ b/app/components/Icon/LndLogo.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
 const SvgLndLogo = props => (
-  <svg width="1em" height="1em" viewBox="0 0 400 400" {...props}>
+  <svg height="1em" viewBox="0 0 400 400" width="1em" {...props}>
     <g fillRule="evenodd">
       <path d="M255.2 28.753c0 .417-.357.847-.8.963-.55.144-.8.546-.8 1.288v1.078l1.089-1.241c1.475-1.68 2.911-1.694 2.911-.028 0 .708-.249 1.308-.6 1.442-.772.297-.813 2.545-.047 2.545.626 0 1.033-1.197 1.042-3.057.003-.745.25-1.351.605-1.488.793-.304.77-1.704-.033-2.012-1.454-.558-3.367-.268-3.367.51m-4.4 5.647c0 .44-.204.8-.454.8-.534 0-2.346 1.87-2.346 2.421 0 .208-.36.739-.8 1.179-.44.44-.8 1.07-.8 1.4 0 .33-.27.6-.6.6-.33 0-.6.306-.6.68 0 .447.754-.099 2.2-1.592 1.21-1.249 2.2-2.455 2.2-2.68 0-.224.249-.408.553-.408.305 0 .648-.36.763-.8.115-.44.496-.8.847-.8.37 0 .637-.335.637-.8 0-.533-.267-.8-.8-.8s-.8.267-.8.8m4.7 2.172c-.881.65-.947 2.628-.087 2.628.748 0 1.09-.798.917-2.139-.114-.883-.216-.943-.83-.489m-1.633 4.095c-.488.487-.276 1.333.333 1.333.333 0 .6-.356.6-.8 0-.797-.426-1.04-.933-.533M243.6 43.013c0 .336-.27.716-.6.842-.33.127-.6.46-.6.741 0 .281-.36.605-.8.72-.464.121-.8.546-.8 1.009 0 .603.197.749.8.591.44-.115.8-.388.8-.606 0-.579 1.714-2.295 2.3-2.303.275-.004.5-.367.5-.807 0-.533-.267-.8-.8-.8-.452 0-.8.267-.8.613m9.1.584c-.882.844-.943 2.803-.087 2.803.768 0 1.08-.785.915-2.299-.121-1.106-.169-1.136-.828-.504m-1.9 4.803c0 .444.267.8.6.8.333 0 .6-.356.6-.8 0-.444-.267-.8-.6-.8-.333 0-.6.356-.6.8m-11.6.157c0 .307-.27.661-.6.788-.33.126-.6.506-.6.842a.613.613 0 0 1-.61.613c-.361 0-.71.502-.856 1.231-.167.832-.583 1.359-1.282 1.625-1.65.628-2.411 2.468-.852 2.06.44-.115.8-.392.8-.615 0-.224.594-.968 1.32-1.654.726-.686 1.441-1.562 1.588-1.947.147-.385.543-.7.879-.7.337 0 .613-.27.613-.6 0-.33.27-.6.6-.6.333 0 .6-.356.6-.8 0-.533-.267-.8-.8-.8-.44 0-.8.251-.8.557m10.7 2.015c-.716.528-1.004 3.028-.349 3.028.709 0 1.3-1.18 1.176-2.346-.113-1.064-.205-1.141-.827-.682m-1.9 5.695c0 .918.187 1.333.6 1.333s.6-.415.6-1.333c0-.919-.187-1.334-.6-1.334s-.6.415-.6 1.334M232.4 57.4c0 .55-.14 1-.311 1-.784 0-2.886 2.423-2.843 3.277.033.647.1.719.226.242.099-.375.528-.792.954-.927.426-.135.774-.504.774-.819 0-.315.27-.573.6-.573.33 0 .6-.249.6-.553 0-.305.36-.648.8-.763.479-.125.8-.546.8-1.047 0-.57-.255-.837-.8-.837-.587 0-.8.267-.8 1m15.232 1.1c-.018.385-.302.7-.632.7-.333 0-.6.356-.6.8 0 .44.267.8.592.8.639 0 1.218-1.637.879-2.483-.133-.329-.219-.263-.239.183M246 62.024c0 .233-.16.324-.357.203-.196-.121-.43.408-.519 1.176-.133 1.139-.03 1.397.556 1.397.573 0 .72-.326.72-1.6 0-.88-.09-1.6-.2-1.6-.11 0-.2.191-.2.424M228 63c0 .33-.287.6-.637.6-.351 0-.732.36-.847.8-.115.44-.458.8-.763.8-.304 0-.553.36-.553.8 0 .533.267.8.8.8s.8-.267.8-.8c0-.44.226-.8.502-.8s.699-.63.94-1.4c.241-.77.285-1.4.098-1.4-.187 0-.34.27-.34.6m16.3 3.093c-.705.712-.957 1.912-.4 1.901.784-.016 1.351-.773 1.232-1.645-.126-.921-.163-.932-.832-.256m-21.203 2.357c-.383.214-.697.831-.697 1.37 0 .713-.218.98-.8.98-.533 0-.8.267-.8.8s.267.8.8.8.8-.267.8-.8c0-.44.158-.8.351-.8.38 0 1.459-2.324 1.2-2.583-.087-.086-.471.018-.854.233m19.17 1.017c-.147.146-.267.79-.267 1.429 0 1.711 1.356 1.356 1.525-.399.12-1.238-.524-1.765-1.258-1.03m-22.95 3.633c-.142.385-.383.79-.534.9-.83.603-.849 2.063-.021 1.62.461-.246.838-.712.838-1.034 0-.322.251-.586.557-.586.604 0 1.138-.972.749-1.361-.475-.474-1.337-.224-1.589.461m21.983 1.165c-.722.291-.636 2.135.1 2.135.4 0 .6-.4.6-1.2 0-.66-.045-1.186-.1-1.168-.055.017-.325.122-.6.233M216.516 77.2c-.115.44-.458.8-.763.8-.304 0-.553.36-.553.8 0 .44-.171.8-.379.8-.209 0-.839.426-1.4.946-1.249 1.157-1.374 2.271-.221 1.97.443-.116.8-.546.8-.963 0-.414.27-.753.6-.753.33 0 .6-.27.6-.6 0-.333.356-.6.8-.6.554 0 .8-.267.8-.869 0-.477.298-1.197.662-1.6.617-.682.615-.731-.037-.731-.385 0-.794.36-.909.8m22.951.667c-.551.55-.238 1.333.533 1.333.533 0 .8-.267.8-.8 0-.771-.783-1.084-1.333-.533m-1.212 3.844c-.787.575-.517 1.889.388 1.889.352 0 .557-.441.557-1.2 0-1.372-.006-1.376-.945-.689M210.8 84.4c0 .44-.204.8-.454.8-.714 0-2.346 1.959-2.346 2.815 0 .507-.484.976-1.4 1.359-1.159.484-2.119 2.226-1.227 2.226.383 0 4.227-3.978 4.227-4.374 0-.234.258-.426.573-.426.315 0 .687-.36.827-.8.14-.44.512-.8.827-.8.315 0 .573-.36.573-.8 0-.533-.267-.8-.8-.8s-.8.267-.8.8m26.3.315c-.86.177-.939 1.685-.087 1.685.621 0 1.177-.902.925-1.501-.076-.18-.453-.263-.838-.184m-1.4 3.883c-.694.789-.63 2.202.1 2.202.419 0 .6-.422.6-1.4 0-1.575-.009-1.586-.7-.802m-.84 3.459c-.033.362-.33.761-.66.888-.792.304-.782 1.855.013 1.855.777 0 1.094-.818.877-2.266-.094-.624-.197-.838-.23-.477m-31.26 1.081c0 .782-1.173 2.062-1.889 2.062-.36 0-.911.867-.911 1.433 0 .092.36.167.8.167.44 0 .8-.171.8-.379 0-.551 1.812-2.421 2.346-2.421.25 0 .454-.36.454-.8 0-.533-.267-.8-.8-.8-.511 0-.8.267-.8.738m29.002 4.06c-.662.732-.667.802-.051.802.371 0 .781-.278.911-.617.372-.971-.064-1.065-.86-.185M198.9 98.963c-.495.522-.9 1.149-.9 1.393s-.256.444-.568.444c-.577 0-1.306 2.259-.87 2.695.131.131.238-.062.238-.428 0-.367.27-.667.6-.667.33 0 .6-.204.6-.454 0-.534 1.87-2.346 2.421-2.346.208 0 .379-.36.379-.8 0-1.069-.797-1-1.9.163m32.4 1.302c-.707.285-.623 1.735.1 1.735.373 0 .6-.378.6-1 0-.55-.045-.986-.1-.968-.055.017-.325.122-.6.233m-36.9 4.135c-.44.44-.8 1.051-.8 1.357 0 .307-.27.661-.6.788-.33.126-.6.506-.6.842 0 .337.27.613.6.613.33 0 .6-.27.6-.6 0-.33.36-.96.8-1.4.44-.44.8-1.055.8-1.367 0-.311.225-.657.5-.768.4-.161.4-.208 0-.233-.275-.018-.86.328-1.3.768m35.6-.2c-.408.491-.38.6.151.6.357 0 .649-.27.649-.6 0-.33-.068-.6-.151-.6-.083 0-.375.27-.649.6m-2 4.067c0 .563.238.933.6.933s.6-.37.6-.933c0-.563-.238-.934-.6-.934s-.6.371-.6.934M190 110c-.44.44-.786 1.025-.768 1.3.025.4.072.4.233 0 .111-.275.457-.5.768-.5a.57.57 0 0 0 .567-.571c0-.314.315-.653.7-.753.667-.174.667-.185 0-.23-.385-.025-1.06.314-1.5.754m37.66.913c-.033.391-.33.816-.66.942-.788.303-.777 1.745.013 1.745.777 0 1.094-.818.877-2.266-.094-.624-.197-.813-.23-.421m-41.142 3.387c-.142.385-.496.844-.788 1.02-.717.433-.673 1.48.062 1.48.326 0 .708-.495.848-1.1.141-.605.539-1.325.884-1.6.566-.45.56-.5-.06-.5-.379 0-.805.315-.946.7m39.214 1.356c-.242.299-.567 1.141-.724 1.871-.156.73-.536 1.424-.846 1.543-.846.325-.722 1.819.138 1.656.469-.089.743-.58.83-1.489.071-.746.403-1.774.737-2.284.696-1.061.579-2.181-.135-1.297m-42.67 3.075c-.809.895-.851 1.316-.101 1.029.308-.119.651-.563.762-.988.25-.955.171-.96-.661-.041M180.8 121.6c0 .533-.267.8-.8.8s-.8.267-.8.8c0 .44-.18.8-.4.8-.22 0-.4.27-.4.6 0 .33.18.6.4.6.22 0 .4-.141.4-.313 0-.339 1.37-2.179 2.5-3.357.668-.697.663-.73-.1-.73-.533 0-.8.267-.8.8m41.858 1.403c-.408.3-.678.725-.6.944.084.236.444.175.884-.15.408-.3.678-.725.6-.944-.084-.236-.444-.175-.884.15m-1.39 2.951c-.293.183-.473.804-.4 1.379.095.755.28.953.664.713.293-.183.473-.804.4-1.379-.095-.755-.28-.953-.664-.713M175.2 128.6c0 .33-.287.6-.637.6-.351 0-.732.36-.847.8-.115.44-.458.8-.763.8-.304 0-.553.36-.553.8 0 .444.267.8.6.8.33 0 .602-.315.603-.7.002-.385.644-1.375 1.426-2.2.967-1.02 1.222-1.5.796-1.5a.615.615 0 0 0-.625.6m44.7 1.676c-.466.122-.7.575-.7 1.357 0 1.074.068 1.131.8.674.597-.372 1.262-2.521.7-2.261-.055.026-.415.129-.8.23m-1.349 4.021c-.247.401-.576 1.308-.732 2.016-.156.713-.536 1.287-.851 1.287-.365 0-.568.43-.568 1.203 0 1.104.067 1.162.8.704.53-.331.8-.933.8-1.783 0-.755.261-1.43.633-1.638.397-.223.583-.757.5-1.436-.12-.979-.175-1.013-.582-.353m-49.651 1.866c-.941.993-1.175 1.837-.51 1.837.214 0 .66-.524.991-1.164.331-.64.831-1.256 1.111-1.368.356-.144.329-.212-.092-.23-.33-.013-1.005.403-1.5.925m-2.6 3.166c-1.213.994-1.391 1.471-.547 1.471.305 0 .648-.36.763-.8.115-.44.496-.8.847-.8.35 0 .637-.18.637-.4 0-.612-.493-.459-1.7.529m49.4 2.164c-.6.208-.676 1.707-.087 1.707.465 0 .934-.989.725-1.527-.076-.194-.363-.275-.638-.18M163.6 143c0 .33-.27.6-.6.6-.33 0-.6.339-.6.753 0 .417-.357.847-.8.963-.44.115-.8.406-.8.647 0 .24.36.437.8.437.44 0 .8-.255.8-.567 0-.311.135-.626.3-.7.797-.354 2.113-2.733 1.512-2.733a.608.608 0 0 0-.612.6m51.254 1.3c-.029.275-.324.5-.654.5-.419 0-.6.422-.6 1.4 0 .77.15 1.4.332 1.4.59 0 1.345-1.852 1.158-2.84-.1-.528-.206-.735-.236-.46m-2.154 4.82c-.931.184-1.013 2.88-.087 2.88.739 0 1.092-.8.917-2.076-.09-.651-.346-.9-.83-.804m-56.162 2.297c-.349.909.132 1.171.843.459.781-.781.783-1.076.006-1.076-.336 0-.719.278-.849.617m54.762 1.605c-.605.658-.66 1.778-.087 1.778.507 0 .901-.95.721-1.737-.113-.491-.214-.498-.634-.041m-57.033 1.245c-.461.46-.292.933.333.933.33 0 .6-.27.6-.6 0-.625-.473-.794-.933-.333m55.433 1.998c-.275.111-.5.83-.5 1.598 0 2.051 1.351 1.726 1.524-.366.122-1.468-.019-1.638-1.024-1.232m-60.079 4.096c-.346.647-.289.729.386.553.436-.114.793-.456.793-.761 0-.802-.705-.678-1.179.208m58.594.178c-.789.577-.542 1.461.409 1.461.348 0 .576-.396.576-1 0-1.163-.014-1.17-.985-.461m-1.115 2.754c-.873.882-.95 3.107-.108 3.107.669 0 1.136-1.424.939-2.859-.125-.913-.162-.924-.831-.248m-62.8 3.539c-.94.547-.887 1.168.1 1.168.533 0 .8-.267.8-.8 0-.918.026-.907-.9-.368m61.572.675c-.18.278-.495.402-.7.276-.206-.128-.372.493-.372 1.393 0 1.644.949 2.344 1.441 1.062.342-.891.014-3.323-.369-2.731M204 172c-.317.196-.444.489-.282.652.163.162.505.085.762-.172.604-.604.267-.942-.48-.48m13.4.774c-2.566.598 4.995.804 33.466.914 28.15.108 29.918.057 29.35-.861-.298-.484-60.749-.534-62.816-.053m64.293 1.626c.275.44.638.8.807.8.169 0 .082-.36-.193-.8-.275-.44-.638-.8-.807-.8-.169 0-.082.36.193.8m-144.872 1.561c-.346.647-.289.729.386.553.436-.114.793-.456.793-.761 0-.802-.705-.678-1.179.208m146.379-.124c0 .351.36.732.8.847.44.115.8.437.8.716 0 .279.36.601.8.716 1.131.296 1.021-.659-.218-1.898-1.152-1.152-2.182-1.331-2.182-.381M133.718 179.9c-.142.385-.496.844-.788 1.02-.721.435-.672 1.48.07 1.48.33 0 .6-.353.6-.784 0-.432.394-1.152.875-1.6.75-.699.777-.816.188-.816-.379 0-.804.315-.945.7m152.962-.41c.264.183.666.778.894 1.321.407.973.412.969.32-.208-.067-.847-.327-1.233-.894-1.321-.521-.081-.632-.009-.32.208m1.15 4.646c-.341 2.281.11 5.064.821 5.064.422 0 .549-.785.549-3.4 0-3.845-.882-4.917-1.37-1.664M125.6 190.2c-.408.491-.38.6.151.6.357 0 .649-.27.649-.6 0-.33-.068-.6-.151-.6-.083 0-.375.27-.649.6m161.5 1.467c-.842.882-.903 1.533-.143 1.533.306 0 .675-.471.819-1.047.33-1.316.203-1.407-.676-.486m-165.671 4.162c-.823.822-.794.939.171.687.44-.115.8-.458.8-.763 0-.713-.199-.697-.971.076M282 198.4c0 .533.267.8.8.8s.8-.267.8-.8-.267-.8-.8-.8-.8.267-.8.8m-.646 1.51c-.245.16-.573.695-.727 1.19-.155.495-.539.9-.854.9-.315 0-.573.23-.573.511s-.36.819-.8 1.196c-.44.377-.8.948-.8 1.269 0 .321-.315.768-.7.992-.625.364-.604.409.2.42.637.008.9-.221.9-.788 0-.444.267-.8.6-.8.333 0 .6-.356.6-.8 0-.44.171-.8.379-.8.805 0 2.48-1.969 2.352-2.764-.079-.49-.309-.7-.577-.526M116.8 201.6c0 .444.267.8.6.8.333 0 .6-.356.6-.8 0-.444-.267-.8-.6-.8-.333 0-.6.356-.6.8m157.793 7.034c-.766.789-1.393 1.599-1.393 1.8 0 .201-.27.366-.6.366-.33 0-.6.27-.6.6 0 .333.356.6.8.6.444 0 .8-.267.8-.6 0-.33.251-.6.557-.6.612 0 1.043-.841 1.043-2.033 0-.422.27-.767.6-.767.33 0 .6-.18.6-.4 0-.666-.351-.465-1.807 1.034M111.28 211.28c-.709.709-.604 1.653.153 1.363.348-.134.708-.243.8-.243.092 0 .167-.36.167-.8 0-.907-.415-1.025-1.12-.32M271.2 213c-.408.491-.38.6.151.6.357 0 .649-.27.649-.6 0-.33-.068-.6-.151-.6-.083 0-.375.27-.649.6m-160.336 1.638c-.046 1.187.156 1.838.736 2.362.775.702.8.699.8-.095 0-.451-.258-.918-.573-1.039-.315-.121-.646-.815-.736-1.543-.15-1.22-.168-1.196-.227.315m159.036.077c-.385.079-.7.417-.7.752 0 .334-.36.702-.8.817-.443.116-.8.546-.8.963 0 .414-.27.753-.6.753-.33 0-.6.27-.6.6 0 .333.356.6.8.6.452 0 .8-.267.8-.613 0-.336.27-.716.6-.842.33-.127.6-.407.6-.624 0-.216.386-.705.857-1.087.975-.789.887-1.533-.157-1.319m-5.674 6.857c-.415.458-.68.907-.59.998.311.31 1.648-.919 1.496-1.375-.093-.277-.449-.128-.906.377m-1.526 1.904c-.385.1-.7.439-.7.753s-.25.571-.557.571c-.306 0-.668.445-.804.989-.137.544-.629 1.343-1.093 1.775l-.844.787.902-.236c.497-.13.99-.569 1.096-.976.106-.406.442-.739.747-.739.304 0 .553-.36.553-.8 0-.533.267-.8.8-.8s.8-.267.8-.8c0-.44-.045-.779-.1-.754-.055.026-.415.129-.8.23m-146.3.724c0 .33.292.6.649.6.531 0 .559-.109.151-.6-.274-.33-.566-.6-.649-.6-.083 0-.151.27-.151.6m1.674 1.3c.086.455.552.731 1.329.787.659.048.972-.012.697-.133-.275-.121-.5-.476-.5-.787 0-.312-.373-.567-.829-.567-.574 0-.789.216-.697.7m139.642 4.1c-.115.44-.458.8-.763.8-.304 0-.553.264-.553.586 0 .322-.36.779-.8 1.014-.44.235-.8.692-.8 1.014 0 .322.36.586.8.586.533 0 .8-.267.8-.8 0-.44.248-.8.551-.8.309 0 .73-.704.958-1.6.223-.88.318-1.6.211-1.6-.107 0-.289.36-.404.8m-63.416.032c-.94.547-.887 1.168.1 1.168.533 0 .8-.267.8-.8 0-.918.026-.907-.9-.368m-1.633 4.235c-.488.487-.276 1.333.333 1.333.333 0 .6-.356.6-.8 0-.797-.426-1.04-.933-.533m60.533 1.504c0 .314-.315.653-.7.753-.527.138-.477.195.2.23.649.033.9-.177.9-.754 0-.44-.09-.8-.2-.8-.11 0-.2.257-.2.571m-2.684 3.029c-.115.44-.458.8-.763.8-.304 0-.553.362-.553.804 0 .442-.36 1.112-.8 1.489-.44.377-.8.9-.8 1.163 0 .262-.225.568-.5.679-.376.152-.367.21.037.233.296.018.632-.328.747-.768.115-.44.458-.8.763-.8.304 0 .553-.27.553-.6 0-.33.276-.6.613-.6.336 0 .728-.315.869-.7.142-.385.496-.844.788-1.02.739-.446.664-1.48-.107-1.48-.351 0-.732.36-.847.8m-59.449-.133c-.507.507-.264.933.533.933.444 0 .8-.267.8-.6 0-.609-.846-.821-1.333-.333m-1.467 2.9c0 .202-.104.639-.232.971-.174.453-.024.549.6.386.952-.249 1.15-1.724.232-1.724-.33 0-.6.165-.6.367m55.9 3.551c-.385.077-.7.357-.7.622s-.315.786-.7 1.157c-2.309 2.226-2.538 2.703-1.3 2.703.44 0 .8-.22.8-.49 0-.269.646-1.064 1.436-1.767 1.47-1.308 1.714-2.476.464-2.225m-57.233.749c-.461.46-.292.933.333.933.33 0 .6-.27.6-.6 0-.625-.473-.794-.933-.333m-1.453 3.307c-.603 1.126-.514 1.295.386.733.825-.515 1.097-1.507.414-1.507-.212 0-.572.348-.8.774m54.446 1.492c-.641.695-.461 1.029.3.559.296-.183.471-.516.389-.739-.086-.236-.377-.16-.689.18m-1.36 1.61c-.385.1-.703.394-.707.653-.009.588-1.75 2.271-2.349 2.271-.244 0-.444.323-.444.719 0 .825-.771 1.933-2.9 4.169-.825.866-1.5 1.741-1.5 1.944 0 .202-.249.368-.553.368-.305 0-.648.36-.763.8-.115.44-.496.8-.847.8-.35 0-.637.27-.637.6 0 .333.356.6.8.6.444 0 .8-.267.8-.6 0-.33.27-.6.6-.6.333 0 .6-.356.6-.8 0-.452.267-.8.613-.8.336 0 .716-.27.842-.6.127-.33.462-.6.745-.6.573 0 1-.868 1-2.033 0-.422.27-.767.6-.767.333 0 .6-.356.6-.8 0-.465.267-.8.637-.8.351 0 .732-.36.847-.8.115-.44.458-.8.763-.8.304 0 .553-.23.553-.511s.36-.819.8-1.196c.626-.537 1.173-1.666.7-1.447-.055.026-.415.129-.8.23m-54.272 1.09c-.298.359-.423.772-.278.917.373.374 1.172-.516.98-1.092-.11-.331-.327-.277-.702.175M184 257.4c0 .33.27.6.6.6.33 0 .6-.27.6-.6 0-.33-.27-.6-.6-.6-.33 0-.6.27-.6.6m-2.616 7.027c-.145.234-.168.522-.051.64.287.286 1.067-.219 1.067-.691 0-.511-.691-.477-1.016.051m46.334 2.273c-.142.385-.496.844-.788 1.02-.291.176-.53.581-.53.9 0 .319-.27.58-.6.58-.33 0-.6.27-.6.6 0 .33-.36.96-.8 1.4l-.8.8h.8c.444 0 .8-.267.8-.6 0-.33.27-.6.6-.6.333 0 .6-.356.6-.8 0-.452.267-.8.613-.8.336 0 .728-.315.869-.7.142-.385.496-.844.788-1.02.291-.176.53-.581.53-.9 0-.818-1.172-.724-1.482.12m-4.486 6c-.018.275-.302.5-.632.5s-.6.276-.6.613c0 .336-.254.709-.564.828-.31.12-.672.649-.805 1.177-.132.528-.621 1.314-1.085 1.746l-.844.787.902-.236c.497-.13.99-.569 1.096-.976.106-.406.442-.739.747-.739.32 0 .553-.412.553-.977 0-.541.377-1.242.844-1.569.464-.325.748-.83.631-1.122-.156-.392-.22-.4-.243-.032m-5.516 6.9c-.115.44-.437.8-.716.8-.279 0-.601.36-.716.8-.115.44-.496.8-.847.8-.35 0-.637.27-.637.6 0 .33-.27.6-.6.6-.333 0-.6.356-.6.8 0 .44-.36 1.16-.8 1.6l-.8.8h.8c.533 0 .8-.267.8-.8 0-.452.267-.8.613-.8.336 0 .728-.301.869-.669.314-.819 1.589-2.131 2.069-2.131.194 0 .534-.72.758-1.6.223-.88.318-1.6.211-1.6-.107 0-.289.36-.404.8m-7.2 8.8c-.115.44-.437.8-.716.8-.279 0-.601.36-.716.8-.115.44-.496.8-.847.8-.35 0-.637.27-.637.6 0 .33-.232.6-.515.6-.283 0-.542.36-.575.8-.036.478.186.8.552.8.337 0 .707-.36.822-.8.115-.44.458-.8.763-.8.304 0 .553-.186.553-.412 0-.227.63-.991 1.4-1.698.77-.706 1.4-1.511 1.4-1.787 0-.822-1.257-.571-1.484.297m-5.016 6.276c-.385.1-.7.529-.7.953 0 .424-.225.774-.5.778-.61.008-2.3 1.735-2.3 2.349 0 .244.36.444.8.444.533 0 .8-.267.8-.8 0-.444.267-.8.6-.8.33 0 .6-.249.6-.553 0-.305.36-.648.8-.763.479-.125.8-.546.8-1.047 0-.46-.045-.816-.1-.791-.055.026-.415.129-.8.23m-5 6.385c-.715.75-1.3 1.526-1.3 1.725 0 .198-.36.474-.8.614-.44.14-.8.512-.8.827 0 .315-.27.573-.6.573-.33 0-.6.323-.6.719 0 .888-.811 1.998-3.447 4.716-1.126 1.161-2.155 2.393-2.287 2.738-.133.345-.517.627-.853.627a.608.608 0 0 0-.613.6c0 .333.356.6.8.6.444 0 .8-.267.8-.6 0-.33.27-.6.6-.6.333 0 .6-.356.6-.8 0-.44.196-.8.436-.8.81 0 2.764-2.191 2.764-3.099 0-.534.244-.901.6-.901.333 0 .6-.356.6-.8 0-.44.258-.8.573-.8.315 0 .687-.36.827-.8.14-.44.512-.8.827-.8.315 0 .573-.36.573-.8 0-.444.267-.8.6-.8.33 0 .6-.27.6-.6 0-.33.371-.971.825-1.425.454-.454.769-.972.7-1.152-.069-.179-.71.287-1.425 1.038m-36.762 8.756c-.347.904-.036.952.762.116.592-.62.606-.733.087-.733-.336 0-.719.278-.849.617m23.978 6.983c-.115.44-.437.8-.716.8-.279 0-.601.36-.716.8-.115.44-.496.8-.847.8-.409 0-.637.35-.637.98 0 .539-.315 1.164-.7 1.388-.625.364-.604.409.2.42.508.007.9-.23.9-.545 0-.307.27-.661.6-.788.33-.126.6-.506.6-.842 0-.337.276-.613.613-.613.336 0 .728-.315.869-.7.142-.385.496-.844.788-1.02.739-.446.664-1.48-.107-1.48-.351 0-.732.36-.847.8m-26.416-.135c-.769.31-.593 1.292.221 1.231a.87.87 0 0 0 .775-.775c.055-.736-.113-.813-.996-.456m21.4 6.411c-.385.1-.7.441-.7.757 0 .474.14.487.8.074.611-.381 1.218-1.301.7-1.061-.055.026-.415.129-.8.23m-24.562 1.141c-.13.34-.137.718-.014.84.35.351 1.076-.244 1.076-.881 0-.767-.763-.738-1.062.041M180.6 325.6c-.14.44-.491.8-.78.8-.29 0-.608.425-.707.945-.214 1.115 1.178 1.027 1.591-.101.129-.354.474-.788.766-.964.291-.176.53-.581.53-.9 0-.872-1.109-.697-1.4.22m-23.786 3.174c-.601 1.123-.515 1.308.386.826.44-.235.8-.692.8-1.014 0-.835-.698-.725-1.186.188m20.902.826c-.115.44-.437.8-.716.8-.279 0-.601.36-.716.8-.115.44-.496.8-.847.8-.35 0-.637.27-.637.6 0 .33-.27.6-.6.6-.333 0-.6.356-.6.8 0 .44-.36 1.16-.8 1.6l-.8.8h.8c.533 0 .8-.267.8-.8 0-.452.267-.8.613-.8.336 0 .728-.301.869-.669.314-.819 1.589-2.131 2.069-2.131.194 0 .534-.72.758-1.6.223-.88.318-1.6.211-1.6-.107 0-.289.36-.404.8M155.2 333c0 .33.27.6.6.6.33 0 .6-.27.6-.6 0-.33-.27-.6-.6-.6-.33 0-.6.27-.6.6m-1.219 3.036c-.383.715-.343.815.281.695.401-.077.789-.453.863-.836.186-.968-.603-.871-1.144.141m16.535 2.364c-.115.44-.437.8-.716.8-.279 0-.601.36-.716.8-.115.44-.496.8-.847.8-.35 0-.637.27-.637.6 0 .33-.232.6-.515.6-.283 0-.542.36-.575.8-.036.478.186.8.552.8.337 0 .707-.36.822-.8.115-.44.458-.8.763-.8.304 0 .553-.186.553-.412 0-.227.63-.991 1.4-1.698.77-.706 1.4-1.511 1.4-1.787 0-.822-1.257-.571-1.484.297m-18.116 1.8c0 .33.27.6.6.6.33 0 .6-.27.6-.6 0-.33-.27-.6-.6-.6-.33 0-.6.27-.6.6m-1.232 3.061c-.398.743-.368.825.218.6.374-.144.755-.261.847-.261.092 0 .167-.27.167-.6 0-.88-.702-.731-1.232.261m14.332 1.415c-.385.1-.7.529-.7.953 0 .424-.225.774-.5.778-.61.008-2.3 1.735-2.3 2.349 0 .244-.27.444-.6.444-.333 0-.6.356-.6.8 0 .444.267.8.6.8.333 0 .6-.356.6-.8 0-.533.267-.8.8-.8s.8-.267.8-.8c0-.444.267-.8.6-.8.33 0 .6-.249.6-.553 0-.305.36-.648.8-.763.479-.125.8-.546.8-1.047 0-.46-.045-.816-.1-.791-.055.026-.415.129-.8.23m-15.804 2.919c-.695 1.113-.62 1.289.304.712.44-.275.8-.726.8-1.003 0-.752-.542-.609-1.104.291m-1.216 3.685c-.653.653-.603 1.12.12 1.12.333 0 .6-.356.6-.8 0-.932-.074-.966-.72-.32m11.419.497c-.384.281-.699.704-.699.94s-.36.543-.8.683c-.44.14-.8.512-.8.827 0 .315-.27.573-.6.573-.33 0-.6.261-.6.58 0 .319-.229.724-.508.9-.439.276-1.492 2.21-1.492 2.739 0 .099.18.181.4.181.22 0 .4-.251.4-.557 0-.307.27-.661.6-.788.33-.126.6-.506.6-.842 0-.337.258-.613.573-.613.315 0 .687-.36.827-.8.14-.44.512-.8.827-.8.315 0 .573-.36.573-.8 0-.44.249-.8.553-.8.305 0 .658-.397.784-.883.291-1.112.223-1.17-.638-.54m-13.117 3.057c-.246.459-.342.939-.214 1.067.127.128.232.022.232-.234 0-.257.27-.467.6-.467.33 0 .6-.27.6-.6 0-.87-.699-.736-1.218.234m5.915 5.616c-.383.214-.697.651-.697.97 0 .319-.27.58-.6.58-.33 0-.6.287-.6.637 0 .351-.36.732-.8.847-.44.115-.8.458-.8.763 0 .304.36.553.8.553.444 0 .8-.267.8-.6 0-.33.27-.6.6-.6.333 0 .6-.356.6-.8 0-.44.258-.8.573-.8.315 0 .692-.374.837-.83.331-1.045.166-1.212-.713-.72m-4.981 6.35c-.115.44-.458.8-.763.8-.304 0-.553.195-.553.433 0 .706.968.186 1.39-.747.214-.474.664-.936 1-1.028.447-.121.413-.178-.127-.212-.426-.026-.826.292-.947.754m-2.805 3.213c.074.987 1.219.892 1.414-.118.091-.474-.122-.695-.671-.695-.562 0-.786.245-.743.813" />
       <path
diff --git a/app/components/Icon/LtcLogo.js b/app/components/Icon/LtcLogo.js
index 41af90ab5e3..a465001b822 100644
--- a/app/components/Icon/LtcLogo.js
+++ b/app/components/Icon/LtcLogo.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
 const SvgLtcLogo = props => (
-  <svg width="1em" height="1em" viewBox="0.847 0.876 329.254 329.256" {...props}>
+  <svg height="1em" viewBox="0.847 0.876 329.254 329.256" width="1em" {...props}>
     <path
       d="M330.102 165.503c0 90.922-73.705 164.629-164.626 164.629C74.554 330.132.848 256.425.848 165.503.848 74.582 74.554.876 165.476.876c90.92 0 164.626 73.706 164.626 164.627"
       fill="#bebebe"
diff --git a/app/components/Icon/Network.js b/app/components/Icon/Network.js
index bdd0168cfe1..5f609a6cb1b 100644
--- a/app/components/Icon/Network.js
+++ b/app/components/Icon/Network.js
@@ -1,15 +1,15 @@
 import React from 'react'
 
 const SvgNetwork = props => (
-  <svg width="1em" height="1em" viewBox="0 0 18 18" {...props}>
+  <svg height="1em" viewBox="0 0 18 18" width="1em" {...props}>
     <g
-      transform="translate(1 1)"
-      stroke="currentColor"
-      strokeWidth={0.8}
       fill="none"
       fillRule="evenodd"
+      stroke="currentColor"
       strokeLinecap="round"
       strokeLinejoin="round"
+      strokeWidth={0.8}
+      transform="translate(1 1)"
     >
       <circle cx={8} cy={8} r={8} />
       <path d="M0 8h16M8 0c1.876 2.19 2.942 5.034 3 8-.058 2.966-1.124 5.81-3 8-1.876-2.19-2.942-5.034-3-8 .058-2.966 1.124-5.81 3-8z" />
diff --git a/app/components/Icon/Onchain.js b/app/components/Icon/Onchain.js
index 4718637147d..0bcf0bd3f9e 100644
--- a/app/components/Icon/Onchain.js
+++ b/app/components/Icon/Onchain.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
 const SvgOnchain = props => (
-  <svg width="1em" height="1em" viewBox="0 0 50 50" {...props}>
+  <svg height="1em" viewBox="0 0 50 50" width="1em" {...props}>
     <defs>
       <linearGradient id="onchain_svg__a" x1="0%" y1="0%" y2="100%">
         <stop offset="0%" stopColor="#FFBD59" />
@@ -9,18 +9,18 @@ const SvgOnchain = props => (
       </linearGradient>
     </defs>
     <g fill="none" fillRule="evenodd">
-      <circle cx={25} cy={25} r={25} fill="url(#onchain_svg__a)" />
+      <circle cx={25} cy={25} fill="url(#onchain_svg__a)" r={25} />
       <path
+        d="M23 26.675c.946 1.347 2.394 2.19 3.97 2.31 1.574.12 3.12-.494 4.237-1.684l3.265-3.477c2.063-2.275 2.033-5.89-.066-8.126-2.1-2.236-5.494-2.268-7.63-.07l-1.871 1.982"
         stroke="currentColor"
         strokeLinecap="round"
         strokeLinejoin="round"
-        d="M23 26.675c.946 1.347 2.394 2.19 3.97 2.31 1.574.12 3.12-.494 4.237-1.684l3.265-3.477c2.063-2.275 2.033-5.89-.066-8.126-2.1-2.236-5.494-2.268-7.63-.07l-1.871 1.982"
       />
       <path
+        d="M27 24.325c-.946-1.347-2.394-2.19-3.97-2.31-1.574-.12-3.12.494-4.237 1.684l-3.265 3.477c-2.063 2.275-2.033 5.89.066 8.126 2.1 2.236 5.494 2.268 7.63.07l1.86-1.982"
         stroke="currentColor"
         strokeLinecap="round"
         strokeLinejoin="round"
-        d="M27 24.325c-.946-1.347-2.394-2.19-3.97-2.31-1.574-.12-3.12.494-4.237 1.684l-3.265 3.477c-2.063 2.275-2.033 5.89.066 8.126 2.1 2.236 5.494 2.268 7.63.07l1.86-1.982"
       />
     </g>
   </svg>
diff --git a/app/components/Icon/Orbit.js b/app/components/Icon/Orbit.js
index ae28a6f6d55..cc1f353e3c8 100644
--- a/app/components/Icon/Orbit.js
+++ b/app/components/Icon/Orbit.js
@@ -1,9 +1,9 @@
 import React from 'react'
 
 const SvgOrbit = props => (
-  <svg viewBox="0 0 200 200" {...props} width="1em" height="1em">
+  <svg viewBox="0 0 200 200" {...props} height="1em" width="1em">
     <g transform="rotate(135 100 100)">
-      <circle cx={20} cy={100} r={15} fill="#fd9800" />
+      <circle cx={20} cy={100} fill="#fd9800" r={15} />
       <path
         d="M43.716 156.854c44.22 44.218 116.627 22.346 134.01-35.695 15.845-59.58-38.821-114.247-98.4-98.4A79.752 79.752 0 0 0 43.43 43.432"
         fill="none"
@@ -14,7 +14,7 @@ const SvgOrbit = props => (
       />
     </g>
     <g transform="rotate(9.999 -130.687 272.785) scale(.65141)">
-      <circle cx={21.478} cy={96.049} r={15.351} fill="#fd9800" />
+      <circle cx={21.478} cy={96.049} fill="#fd9800" r={15.351} />
       <path
         d="M45.371 153.325c44.547 44.547 117.494 22.512 135.005-35.96 15.964-60.023-39.109-115.096-99.13-99.132a80.34 80.34 0 0 0-36.162 20.828"
         fill="none"
@@ -25,15 +25,15 @@ const SvgOrbit = props => (
       />
     </g>
     <g transform="matrix(-.12289 -.33764 .33672 -.12255 83.046 146.287)">
-      <circle cx={28.276} cy={88.641} r={13.916} fill="#fd9800" />
+      <circle cx={28.276} cy={88.641} fill="#fd9800" r={13.916} />
       <path
         d="M105.092 165.386c59.827 0 94.188-63.953 66.822-115.117-29.446-51.163-103.409-51.163-133.133 0A76.826 76.826 0 0 0 28.38 88.644"
-        transform="matrix(.70708 .70906 -.7052 .70708 93.242 -48.428)"
         fill="none"
         paintOrder="stroke"
         stroke="#fff"
         strokeLinecap="round"
         strokeWidth={7.803}
+        transform="matrix(.70708 .70906 -.7052 .70708 93.242 -48.428)"
       />
     </g>
   </svg>
diff --git a/app/components/Icon/Padlock.js b/app/components/Icon/Padlock.js
index 5b2de973745..3283bace2b6 100644
--- a/app/components/Icon/Padlock.js
+++ b/app/components/Icon/Padlock.js
@@ -1,11 +1,11 @@
 import React from 'react'
 
 const SvgPadlock = props => (
-  <svg width="1em" height="1em" viewBox="0 0 8 11" {...props}>
+  <svg height="1em" viewBox="0 0 8 11" width="1em" {...props}>
     <path
+      d="M7.805 5.219a.609.609 0 0 0-.472-.22h-.222V3.5c0-.958-.305-1.78-.916-2.467C5.583.344 4.852 0 4 0c-.852 0-1.584.344-2.195 1.032C1.195 1.719.89 2.542.89 3.5V5H.667a.61.61 0 0 0-.473.219A.773.773 0 0 0 0 5.75v4.5c0 .208.065.385.194.531A.61.61 0 0 0 .667 11h6.666a.61.61 0 0 0 .473-.219A.773.773 0 0 0 8 10.25v-4.5a.772.772 0 0 0-.195-.531zm-2.027-.22H2.222V3.5c0-.551.174-1.023.521-1.413C3.09 1.696 3.51 1.5 4 1.5c.49 0 .91.195 1.257.586.347.39.52.862.52 1.414V5z"
       fill="currentColor"
       fillRule="evenodd"
-      d="M7.805 5.219a.609.609 0 0 0-.472-.22h-.222V3.5c0-.958-.305-1.78-.916-2.467C5.583.344 4.852 0 4 0c-.852 0-1.584.344-2.195 1.032C1.195 1.719.89 2.542.89 3.5V5H.667a.61.61 0 0 0-.473.219A.773.773 0 0 0 0 5.75v4.5c0 .208.065.385.194.531A.61.61 0 0 0 .667 11h6.666a.61.61 0 0 0 .473-.219A.773.773 0 0 0 8 10.25v-4.5a.772.772 0 0 0-.195-.531zm-2.027-.22H2.222V3.5c0-.551.174-1.023.521-1.413C3.09 1.696 3.51 1.5 4 1.5c.49 0 .91.195 1.257.586.347.39.52.862.52 1.414V5z"
     />
   </svg>
 )
diff --git a/app/components/Icon/Peers.js b/app/components/Icon/Peers.js
index fe099f96d4c..27f0b3fb533 100644
--- a/app/components/Icon/Peers.js
+++ b/app/components/Icon/Peers.js
@@ -1,14 +1,14 @@
 import React from 'react'
 
 const SvgPeers = props => (
-  <svg width="1em" height="1em" viewBox="0 0 24 19" {...props}>
+  <svg height="1em" viewBox="0 0 24 19" width="1em" {...props}>
     <g
-      transform="translate(1 1)"
-      stroke="currentColor"
       fill="none"
       fillRule="evenodd"
+      stroke="currentColor"
       strokeLinecap="round"
       strokeLinejoin="round"
+      transform="translate(1 1)"
     >
       <path d="M16 18v-2a4 4 0 0 0-4-4H4a4 4 0 0 0-4 4v2" />
       <circle cx={8} cy={4} r={4} />
diff --git a/app/components/Icon/Plus.js b/app/components/Icon/Plus.js
index 3b17508cf39..9ed9644f8d1 100644
--- a/app/components/Icon/Plus.js
+++ b/app/components/Icon/Plus.js
@@ -2,15 +2,15 @@ import React from 'react'
 
 const SvgPlus = props => (
   <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 24 24"
+    className="plus_svg__feather plus_svg__feather-plus"
     fill="none"
+    height="1em"
     stroke="currentColor"
-    strokeWidth={2}
     strokeLinecap="round"
     strokeLinejoin="round"
-    className="plus_svg__feather plus_svg__feather-plus"
+    strokeWidth={2}
+    viewBox="0 0 24 24"
+    width="1em"
     {...props}
   >
     <path d="M12 5v14M5 12h14" />
diff --git a/app/components/Icon/PlusCircle.js b/app/components/Icon/PlusCircle.js
index 2b0c4515aa5..97af664d5d3 100644
--- a/app/components/Icon/PlusCircle.js
+++ b/app/components/Icon/PlusCircle.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
 const SvgPlusCircle = props => (
-  <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+  <svg height="1em" viewBox="0 0 24 24" width="1em" {...props}>
     <g fill="none" fillRule="evenodd" stroke="currentColor" transform="translate(1 1)">
       <path d="M11.121 7v8M7 11.121h8" strokeLinecap="round" strokeLinejoin="round" />
       <circle cx={11} cy={11} r={11} />
diff --git a/app/components/Icon/Qrcode.js b/app/components/Icon/Qrcode.js
index 53da37237f3..8cb71e5bcf0 100644
--- a/app/components/Icon/Qrcode.js
+++ b/app/components/Icon/Qrcode.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
 const SvgQrcode = props => (
-  <svg width="1em" height="1em" viewBox="0 0 16 16" {...props}>
+  <svg height="1em" viewBox="0 0 16 16" width="1em" {...props}>
     <g fill="currentColor" fillRule="nonzero">
       <path d="M.4 4.809a.4.4 0 0 1-.4-.4V.4A.4.4 0 0 1 .4 0h4.009a.4.4 0 1 1 0 .8H.8v3.609a.4.4 0 0 1-.4.4zM15.6 16h-4.01a.4.4 0 1 1 0-.8h3.61v-3.61a.4.4 0 1 1 .8 0v4.01a.4.4 0 0 1-.4.4zM15.6 4.809a.4.4 0 0 1-.4-.4V.8h-3.61a.4.4 0 1 1 0-.8h4.01a.4.4 0 0 1 .4.4v4.009a.4.4 0 0 1-.4.4zM4.409 16H.4a.4.4 0 0 1-.4-.4v-4.01a.4.4 0 1 1 .8 0v3.61h3.609a.4.4 0 1 1 0 .8zM11.588 11.98H7.6a.393.393 0 0 1-.393-.393V7.994H3.612a.393.393 0 1 1 0-.786H7.6c.217 0 .393.176.393.393v3.595h3.595a.393.393 0 1 1 0 .785z" />
       <path d="M11.588 9.879a.393.393 0 0 1-.393-.393V7.993H9.879v1.493a.393.393 0 1 1-.786 0V7.6c0-.217.176-.393.393-.393h2.101c.218 0 .393.176.393.393v1.886a.393.393 0 0 1-.393.393zM5.714 6.107H3.612a.393.393 0 0 1-.392-.393V3.612c0-.217.175-.392.392-.392h2.102c.217 0 .393.175.393.392v2.102a.393.393 0 0 1-.393.393zm-1.709-.786h1.316V4.005H4.005v1.316zM11.588 6.107H9.486a.393.393 0 0 1-.393-.393V3.612c0-.217.176-.392.393-.392h2.101c.218 0 .393.175.393.392v2.102a.393.393 0 0 1-.393.393zm-1.71-.786h1.317V4.005H9.879v1.316zM5.714 11.98H3.612a.393.393 0 0 1-.392-.393V9.486c0-.217.175-.393.392-.393h2.102c.217 0 .393.176.393.393v2.101a.393.393 0 0 1-.393.393zm-1.709-.785h1.316V9.879H4.005v1.316zM7.6 6.107a.393.393 0 0 1-.393-.393V3.612a.393.393 0 1 1 .786 0v2.102a.393.393 0 0 1-.393.393z" />
diff --git a/app/components/Icon/Receive.js b/app/components/Icon/Receive.js
index ea84e3db93f..0d47db4c4f6 100644
--- a/app/components/Icon/Receive.js
+++ b/app/components/Icon/Receive.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
 const SvgReceive = props => (
-  <svg width="1em" height="1em" viewBox="0 0 50 50" {...props}>
+  <svg height="1em" viewBox="0 0 50 50" width="1em" {...props}>
     <defs>
       <linearGradient id="receive_svg__a" x1="0%" y1="0%" y2="100%">
         <stop offset="0%" stopColor="#FFBD59" />
@@ -9,9 +9,9 @@ const SvgReceive = props => (
       </linearGradient>
     </defs>
     <g fill="none" fillRule="evenodd">
-      <circle cx={25} cy={25} r={25} fill="url(#receive_svg__a)" />
-      <path stroke="currentColor" d="M25.488 40L30 31l-9 .012z" />
-      <path fill="currentColor" d="M25 31h1V10h-1z" />
+      <circle cx={25} cy={25} fill="url(#receive_svg__a)" r={25} />
+      <path d="M25.488 40L30 31l-9 .012z" stroke="currentColor" />
+      <path d="M25 31h1V10h-1z" fill="currentColor" />
     </g>
   </svg>
 )
diff --git a/app/components/Icon/Search.js b/app/components/Icon/Search.js
index 1a040bef2bd..0692e6ad52d 100644
--- a/app/components/Icon/Search.js
+++ b/app/components/Icon/Search.js
@@ -2,15 +2,15 @@ import React from 'react'
 
 const SvgSearch = props => (
   <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 24 24"
+    className="search_svg__feather search_svg__feather-search"
     fill="none"
+    height="1em"
     stroke="currentColor"
-    strokeWidth={2}
     strokeLinecap="round"
     strokeLinejoin="round"
-    className="search_svg__feather search_svg__feather-search"
+    strokeWidth={2}
+    viewBox="0 0 24 24"
+    width="1em"
     {...props}
   >
     <circle cx={10.5} cy={10.5} r={7.5} />
diff --git a/app/components/Icon/Send.js b/app/components/Icon/Send.js
index 8101ffe1575..dc9ea6842c0 100644
--- a/app/components/Icon/Send.js
+++ b/app/components/Icon/Send.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
 const SvgSend = props => (
-  <svg width="1em" height="1em" viewBox="0 0 50 50" {...props}>
+  <svg height="1em" viewBox="0 0 50 50" width="1em" {...props}>
     <defs>
       <linearGradient id="send_svg__a" x1="0%" y1="0%" y2="100%">
         <stop offset="0%" stopColor="#FFBD59" />
@@ -9,9 +9,9 @@ const SvgSend = props => (
       </linearGradient>
     </defs>
     <g fill="none" fillRule="evenodd">
-      <circle cx={25} cy={25} r={25} fill="url(#send_svg__a)" />
-      <path stroke="currentColor" d="M25.512 10L21 19l9-.012z" />
-      <path fill="currentColor" d="M26 19h-1v21h1z" />
+      <circle cx={25} cy={25} fill="url(#send_svg__a)" r={25} />
+      <path d="M25.512 10L21 19l9-.012z" stroke="currentColor" />
+      <path d="M26 19h-1v21h1z" fill="currentColor" />
     </g>
   </svg>
 )
diff --git a/app/components/Icon/Settings.js b/app/components/Icon/Settings.js
index 3babe437ca2..f0edade13af 100644
--- a/app/components/Icon/Settings.js
+++ b/app/components/Icon/Settings.js
@@ -1,14 +1,14 @@
 import React from 'react'
 
 const SvgSettings = props => (
-  <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+  <svg height="1em" viewBox="0 0 24 24" width="1em" {...props}>
     <g
-      transform="translate(1 1)"
-      stroke="currentColor"
       fill="none"
       fillRule="evenodd"
+      stroke="currentColor"
       strokeLinecap="round"
       strokeLinejoin="round"
+      transform="translate(1 1)"
     >
       <circle cx={11} cy={11} r={3} />
       <path d="M18.4 14a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V20a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 8 18.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H2a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 3.6 8a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H8a1.65 1.65 0 0 0 1-1.51V2a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V8c.26.604.852.997 1.51 1H20a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
diff --git a/app/components/Icon/Spinner.js b/app/components/Icon/Spinner.js
index a634a8df066..86d4d2410d7 100644
--- a/app/components/Icon/Spinner.js
+++ b/app/components/Icon/Spinner.js
@@ -1,11 +1,11 @@
 import React from 'react'
 
 const SvgSpinner = props => (
-  <svg width="1em" height="1em" viewBox="0 0 14 14" {...props}>
+  <svg height="1em" viewBox="0 0 14 14" width="1em" {...props}>
     <defs>
       <path
-        id="spinner_svg__a"
         d="M0 7a.778.778 0 1 1 1.556 0c0 1.464.58 2.835 1.594 3.85a5.444 5.444 0 1 0 1.766-8.881A.778.778 0 1 1 4.32.53 7 7 0 1 1 0 7z"
+        id="spinner_svg__a"
       />
     </defs>
     <use fill="currentColor" xlinkHref="#spinner_svg__a" />
diff --git a/app/components/Icon/Success.js b/app/components/Icon/Success.js
index 50610f9988c..130f1b8964e 100644
--- a/app/components/Icon/Success.js
+++ b/app/components/Icon/Success.js
@@ -1,11 +1,11 @@
 import React from 'react'
 
 const SvgSuccess = props => (
-  <svg width="1em" height="1em" viewBox="0 0 17 17" {...props}>
+  <svg height="1em" viewBox="0 0 17 17" width="1em" {...props}>
     <defs>
       <path
-        id="success_svg__a"
         d="M8.333 16.667A8.333 8.333 0 1 1 8.333 0a8.333 8.333 0 0 1 0 16.667zM11.095 5.66l-4.41 4.41-1.513-1.51a.833.833 0 1 0-1.179 1.178l2.101 2.101a.833.833 0 0 0 1.179 0l5-5a.833.833 0 0 0-1.179-1.178z"
+        id="success_svg__a"
       />
     </defs>
     <use fill="currentColor" fillRule="evenodd" xlinkHref="#success_svg__a" />
diff --git a/app/components/Icon/Sync.js b/app/components/Icon/Sync.js
index c8952817082..25faabb216e 100644
--- a/app/components/Icon/Sync.js
+++ b/app/components/Icon/Sync.js
@@ -3,17 +3,17 @@ import React from 'react'
 const SvgSync = props => (
   <svg
     aria-hidden="true"
-    data-prefix="fas"
-    data-icon="sync-alt"
     className="sync_svg__svg-inline--fa sync_svg__fa-sync-alt sync_svg__fa-w-16"
+    data-icon="sync-alt"
+    data-prefix="fas"
     viewBox="0 0 512 512"
     {...props}
-    width="1em"
     height="1em"
+    width="1em"
   >
     <path
-      fill="currentColor"
       d="M370.72 133.28C339.458 104.008 298.888 87.962 255.848 88c-77.458.068-144.328 53.178-162.791 126.85-1.344 5.363-6.122 9.15-11.651 9.15H24.103c-7.498 0-13.194-6.807-11.807-14.176C33.933 94.924 134.813 8 256 8c66.448 0 126.791 26.136 171.315 68.685L463.03 40.97C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.749zM32 296h134.059c21.382 0 32.09 25.851 16.971 40.971l-41.75 41.75c31.262 29.273 71.835 45.319 114.876 45.28 77.418-.07 144.315-53.144 162.787-126.849 1.344-5.363 6.122-9.15 11.651-9.15h57.304c7.498 0 13.194 6.807 11.807 14.176C478.067 417.076 377.187 504 256 504c-66.448 0-126.791-26.136-171.315-68.685L48.97 471.03C33.851 486.149 8 475.441 8 454.059V320c0-13.255 10.745-24 24-24z"
+      fill="currentColor"
     />
   </svg>
 )
diff --git a/app/components/Icon/User.js b/app/components/Icon/User.js
index fe067abcbd3..c662935ef11 100644
--- a/app/components/Icon/User.js
+++ b/app/components/Icon/User.js
@@ -2,15 +2,15 @@ import React from 'react'
 
 const SvgUser = props => (
   <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 24 24"
+    className="user_svg__feather user_svg__feather-user"
     fill="none"
+    height="1em"
     stroke="currentColor"
-    strokeWidth={2}
     strokeLinecap="round"
     strokeLinejoin="round"
-    className="user_svg__feather user_svg__feather-user"
+    strokeWidth={2}
+    viewBox="0 0 24 24"
+    width="1em"
     {...props}
   >
     <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
diff --git a/app/components/Icon/Wallet.js b/app/components/Icon/Wallet.js
index f971d77e84f..aef305aa14f 100644
--- a/app/components/Icon/Wallet.js
+++ b/app/components/Icon/Wallet.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
 const SvgWallet = props => (
-  <svg width="1em" height="1em" viewBox="0 0 25 23" {...props}>
+  <svg height="1em" viewBox="0 0 25 23" width="1em" {...props}>
     <g fill="currentColor" fillRule="evenodd">
       <path d="M22.9 22.822H2.1c-1.158 0-2.1-.942-2.1-2.1V4.869c0-.21.129-.388.311-.463a1.755 1.755 0 0 1-.176-.343.5.5 0 0 1 .933-.36c.256.666 1.342.674 1.815.666H22.9c1.158 0 2.1.942 2.1 2.1v14.253c0 1.158-.942 2.1-2.1 2.1zM1 5.018v15.704c0 .606.494 1.1 1.1 1.1h20.8c.607 0 1.1-.494 1.1-1.1V6.469c0-.606-.493-1.1-1.1-1.1H2.901c-.402.02-1.232 0-1.901-.351z" />
       <path d="M22.318 5.305a.5.5 0 0 1-.5-.5V1.829c0-.274-.099-.508-.28-.656-.181-.15-.428-.203-.695-.15L2.149 2.833C1.071 3.074 1 3.96.999 3.97l.001.75a.5.5 0 0 1-1 0v-.783c.039-.6.503-1.761 1.993-2.088L20.699.035A1.789 1.789 0 0 1 22.174.4c.409.338.644.859.644 1.429v2.976c0 .277-.223.5-.5.5M19.916 14.997a1.301 1.301 0 1 1 1.3-1.301c0 .717-.583 1.3-1.3 1.3zm0-1.6a.3.3 0 1 0-.001.598.3.3 0 0 0 .001-.598z" />
diff --git a/app/components/Icon/Wallet2.js b/app/components/Icon/Wallet2.js
index d96588a6021..cd5711883ed 100644
--- a/app/components/Icon/Wallet2.js
+++ b/app/components/Icon/Wallet2.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
 const SvgWallet2 = props => (
-  <svg width="1em" height="1em" viewBox="0 0 18 16" {...props}>
+  <svg height="1em" viewBox="0 0 18 16" width="1em" {...props}>
     <g fill="currentColor" fillRule="evenodd">
       <path d="M16.488 15.876H1.512C.678 15.876 0 15.22 0 14.415V3.387a.35.35 0 0 1 .224-.322 1.206 1.206 0 0 1-.127-.239.345.345 0 0 1 .207-.45.365.365 0 0 1 .465.2c.184.463.966.469 1.307.463h14.412c.834 0 1.512.655 1.512 1.46v9.916c0 .806-.678 1.46-1.512 1.46zM.72 3.49v10.924c0 .422.356.765.792.765h14.976a.78.78 0 0 0 .792-.765V4.5a.78.78 0 0 0-.792-.765h-14.4c-.289.014-.886 0-1.368-.244z" />
       <path d="M16.069 3.69a.354.354 0 0 1-.36-.348v-2.07a.565.565 0 0 0-.202-.456.607.607 0 0 0-.5-.105l-13.46 1.26c-.776.167-.827.784-.828.79l.001.522a.354.354 0 0 1-.36.347.354.354 0 0 1-.36-.347v-.545c.028-.418.362-1.225 1.435-1.453L14.903.025c.368-.073.768.02 1.062.253.295.235.464.598.464.994v2.07c0 .193-.16.348-.36.348M14.34 10.432c-.517 0-.936-.406-.936-.905 0-.498.42-.903.936-.903s.936.405.936.903c0 .5-.42.905-.936.905zm0-1.113a.212.212 0 0 0-.216.208c0 .116.096.21.216.21a.213.213 0 0 0 .216-.21.212.212 0 0 0-.216-.208z" />
diff --git a/app/components/Icon/Warning.js b/app/components/Icon/Warning.js
index d655ba4e4c7..a317b78bb0c 100644
--- a/app/components/Icon/Warning.js
+++ b/app/components/Icon/Warning.js
@@ -1,11 +1,11 @@
 import React from 'react'
 
 const SvgWarning = props => (
-  <svg width="1em" height="1em" viewBox="0 0 15 14" {...props}>
+  <svg height="1em" viewBox="0 0 15 14" width="1em" {...props}>
     <defs>
       <path
-        id="warning_svg__a"
         d="M9.264 1.682l5.105 9.36A2 2 0 0 1 12.613 14H2.403a2 2 0 0 1-1.757-2.958l5.106-9.36a2 2 0 0 1 3.512 0zm-1.689 8.434a.706.706 0 1 0 0 1.412.706.706 0 0 0 0-1.412zm0-5.297a.706.706 0 0 0-.706.706V8.35a.706.706 0 1 0 1.412 0V5.525a.706.706 0 0 0-.706-.706z"
+        id="warning_svg__a"
       />
     </defs>
     <use fill="currentColor" fillRule="evenodd" xlinkHref="#warning_svg__a" />
diff --git a/app/components/Icon/X.js b/app/components/Icon/X.js
index d1f60288e55..6024cf711b9 100644
--- a/app/components/Icon/X.js
+++ b/app/components/Icon/X.js
@@ -1,11 +1,11 @@
 import React from 'react'
 
 const SvgX = props => (
-  <svg width="1em" height="1em" viewBox="0 0 22 20" {...props}>
+  <svg height="1em" viewBox="0 0 22 20" width="1em" {...props}>
     <defs>
       <path
-        id="x_svg__a"
         d="M10 10L0 20l10-10L0 0l10 10L20 0l-8.394 8.394L10 10l1.606 1.606L20 20 10 10z"
+        id="x_svg__a"
       />
     </defs>
     <use
diff --git a/app/components/Icon/Zap.js b/app/components/Icon/Zap.js
index 7a074f791cd..84e7e34320a 100644
--- a/app/components/Icon/Zap.js
+++ b/app/components/Icon/Zap.js
@@ -1,11 +1,11 @@
 import React from 'react'
 
 const SvgZap = props => (
-  <svg width="1em" height="1em" viewBox="0 0 12 24" {...props}>
+  <svg height="1em" viewBox="0 0 12 24" width="1em" {...props}>
     <path
+      d="M6.548 9.639h3.71l-6.974 10.81 1.753-7.363h-3.98l7.201-10.63-1.71 7.183z"
       fill="none"
       stroke="currentColor"
-      d="M6.548 9.639h3.71l-6.974 10.81 1.753-7.363h-3.98l7.201-10.63-1.71 7.183z"
     />
   </svg>
 )
diff --git a/app/components/Icon/ZapLogo.js b/app/components/Icon/ZapLogo.js
index ae4e107a89c..bc483775457 100644
--- a/app/components/Icon/ZapLogo.js
+++ b/app/components/Icon/ZapLogo.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
 const SvgZapLogo = props => (
-  <svg width="1em" height="1em" viewBox="0 0 63 26" {...props}>
+  <svg height="1em" viewBox="0 0 63 26" width="1em" {...props}>
     <g fill="none" fillRule="evenodd">
       <path
         d="M29.61 20.55h7.644v1.065H28v-.927l7.09-9.392h-6.873v-1.085h8.515v.938L29.61 20.55zm18.588 1.065a11.16 11.16 0 0 1-.185-1.001 6.668 6.668 0 0 1-.054-.854c-.435.597-1.015 1.093-1.74 1.486-.725.394-1.54.59-2.447.59-1.145 0-2.035-.294-2.67-.885-.634-.59-.95-1.38-.95-2.371 0-1.054.468-1.898 1.407-2.53.94-.632 2.206-.949 3.8-.949h2.6V13.69c0-.815-.27-1.454-.81-1.918-.54-.464-1.296-.696-2.268-.696-.906 0-1.658.221-2.256.664-.598.443-.897.984-.897 1.623l-1.196-.01-.022-.063c-.044-.85.357-1.611 1.202-2.282.844-.671 1.919-1.007 3.224-1.007 1.297 0 2.341.32 3.132.96.79.639 1.185 1.556 1.185 2.75v5.608c0 .4.023.79.07 1.17.048.379.126.755.234 1.127h-1.359zm-4.274-.896c.936 0 1.762-.212 2.48-.637.718-.425 1.236-.968 1.555-1.629v-2.382h-2.62c-1.183 0-2.127.244-2.834.733-.706.488-1.06 1.094-1.06 1.818 0 .618.22 1.122.658 1.512.439.39 1.046.585 1.821.585zM63 16.23c0 1.708-.399 3.07-1.196 4.085-.798 1.015-1.896 1.523-3.295 1.523-.827 0-1.55-.151-2.17-.454a3.901 3.901 0 0 1-1.517-1.296V26h-1.304V10.21h1.098l.163 1.772a4.12 4.12 0 0 1 1.517-1.466c.62-.344 1.35-.516 2.191-.516 1.414 0 2.52.546 3.317 1.639C62.6 12.732 63 14.188 63 16.008v.221zm-1.305-.221c0-1.448-.297-2.628-.892-3.542-.594-.913-1.464-1.37-2.61-1.37-.877 0-1.589.202-2.136.606-.548.404-.96.93-1.235 1.576v5.48a3.482 3.482 0 0 0 1.29 1.477c.56.358 1.262.537 2.103.537 1.138 0 2.003-.415 2.594-1.244.59-.829.886-1.929.886-3.299v-.221z"
diff --git a/app/components/Icon/ZapSolid.js b/app/components/Icon/ZapSolid.js
index d44a7bb41fa..6f1ddd24256 100644
--- a/app/components/Icon/ZapSolid.js
+++ b/app/components/Icon/ZapSolid.js
@@ -1,11 +1,11 @@
 import React from 'react'
 
 const SvgZapSolid = props => (
-  <svg width="1em" height="1em" viewBox="0 0 13 20" {...props}>
+  <svg height="1em" viewBox="0 0 13 20" width="1em" {...props}>
     <path
+      d="M0 11.645h6.212L4.14 19.533l8.282-11.645H6.626L8.696 0z"
       fill="currentColor"
       fillRule="evenodd"
-      d="M0 11.645h6.212L4.14 19.533l8.282-11.645H6.626L8.696 0z"
     />
   </svg>
 )
diff --git a/app/components/LoadingBolt/LoadingBolt.js b/app/components/LoadingBolt/LoadingBolt.js
index b6f8eaf6dfc..607d38decdc 100644
--- a/app/components/LoadingBolt/LoadingBolt.js
+++ b/app/components/LoadingBolt/LoadingBolt.js
@@ -54,11 +54,11 @@ const FullPageGradient = styled(Flex)`
 class LoadingBolt extends React.PureComponent {
   static propTypes = {
     isLoading: PropTypes.bool.isRequired,
-    message: PropTypes.object
+    message: PropTypes.object,
   }
 
   static defaultProps = {
-    message: messages.loading
+    message: messages.loading,
   }
 
   render() {
@@ -66,17 +66,17 @@ class LoadingBolt extends React.PureComponent {
 
     return (
       <Transition
-        native
-        items={isLoading}
-        from={{ opacity: 1, pointerEvents: 'auto' }}
         enter={{ opacity: 1, pointerEvents: 'auto' }}
+        from={{ opacity: 1, pointerEvents: 'auto' }}
+        items={isLoading}
         leave={{ opacity: 0, pointerEvents: 'none' }}
+        native
       >
         {show =>
           show &&
           (springStyles => (
             <Container style={springStyles}>
-              <FullPageGradient justifyContent="center" alignItems="center" color="primaryText">
+              <FullPageGradient alignItems="center" color="primaryText" justifyContent="center">
                 <Flex alignItems="center" flexDirection="column">
                   <CloudLightning height="140px" width="140px" />
                   <Heading.h2 mt={4}>
diff --git a/app/components/LoadingBolt/messages.js b/app/components/LoadingBolt/messages.js
index f62e802e285..43f44649934 100644
--- a/app/components/LoadingBolt/messages.js
+++ b/app/components/LoadingBolt/messages.js
@@ -8,5 +8,5 @@ export default defineMessages({
   starting_wallet_unlocker: 'Starting wallet unlocker',
   connecting_to_unlocker: 'Connecting to unlocker interface',
   starting_neutrino: 'Starting Neutrino',
-  fetching_tickers: 'Fetching tickers'
+  fetching_tickers: 'Fetching tickers',
 })
diff --git a/app/components/Onboarding/Onboarding.js b/app/components/Onboarding/Onboarding.js
index 908e216339f..095d586d8cb 100644
--- a/app/components/Onboarding/Onboarding.js
+++ b/app/components/Onboarding/Onboarding.js
@@ -16,54 +16,54 @@ import {
   SeedConfirm,
   SeedView,
   WalletCreate,
-  WalletRecover
+  WalletRecover,
 } from './Steps'
 import messages from './messages'
 
 class Onboarding extends React.Component {
   static propTypes = {
     // STATE
-    autopilot: PropTypes.bool,
-    name: PropTypes.string,
-    connectionType: PropTypes.string,
-    connectionHost: PropTypes.string,
+    autopilot: PropTypes.bool, // eslint-disable-line react/boolean-prop-naming
+    clearStartLndError: PropTypes.func.isRequired,
     connectionCert: PropTypes.string,
+    connectionHost: PropTypes.string,
     connectionMacaroon: PropTypes.string,
     connectionString: PropTypes.string,
-    lightningGrpcActive: PropTypes.bool,
-    unlockWalletError: PropTypes.string,
-    walletUnlockerGrpcActive: PropTypes.bool,
-    seed: PropTypes.array,
-    startLndHostError: PropTypes.string,
-    startLndCertError: PropTypes.string,
-    startLndMacaroonError: PropTypes.string,
-    onboarded: PropTypes.bool,
-    fetchingSeed: PropTypes.bool,
-    lndConnect: PropTypes.string,
-
-    // DISPATCH
+    connectionType: PropTypes.string,
     createNewWallet: PropTypes.func.isRequired,
     fetchSeed: PropTypes.func.isRequired,
+    isFetchingSeed: PropTypes.bool,
+    isLightningGrpcActive: PropTypes.bool,
+    isOnboarded: PropTypes.bool,
+    isWalletUnlockerGrpcActive: PropTypes.bool,
+    lndConnect: PropTypes.string,
+    name: PropTypes.string,
     recoverOldWallet: PropTypes.func.isRequired,
     resetOnboarding: PropTypes.func.isRequired,
+
+    // DISPATCH
+    seed: PropTypes.array,
     setAutopilot: PropTypes.func.isRequired,
-    setConnectionType: PropTypes.func.isRequired,
-    setConnectionHost: PropTypes.func.isRequired,
     setConnectionCert: PropTypes.func.isRequired,
+    setConnectionHost: PropTypes.func.isRequired,
     setConnectionMacaroon: PropTypes.func.isRequired,
     setConnectionString: PropTypes.func.isRequired,
+    setConnectionType: PropTypes.func.isRequired,
     setLndconnect: PropTypes.func.isRequired,
-    clearStartLndError: PropTypes.func.isRequired,
     setName: PropTypes.func.isRequired,
     setPassword: PropTypes.func.isRequired,
     setSeed: PropTypes.func.isRequired,
     setUnlockWalletError: PropTypes.func.isRequired,
     startLnd: PropTypes.func.isRequired,
+    startLndCertError: PropTypes.string,
+    startLndHostError: PropTypes.string,
+    startLndMacaroonError: PropTypes.string,
     stopLnd: PropTypes.func.isRequired,
     unlockWallet: PropTypes.func.isRequired,
-    validateHost: PropTypes.func.isRequired,
+    unlockWalletError: PropTypes.string,
     validateCert: PropTypes.func.isRequired,
-    validateMacaroon: PropTypes.func.isRequired
+    validateHost: PropTypes.func.isRequired,
+    validateMacaroon: PropTypes.func.isRequired,
   }
 
   componentWillUnmount() {
@@ -85,14 +85,14 @@ class Onboarding extends React.Component {
       connectionCert,
       connectionMacaroon,
       connectionString,
-      lightningGrpcActive,
-      walletUnlockerGrpcActive,
+      isLightningGrpcActive,
+      isWalletUnlockerGrpcActive,
       seed,
       startLndHostError,
       startLndCertError,
       startLndMacaroonError,
       unlockWalletError,
-      fetchingSeed,
+      isFetchingSeed,
       lndConnect,
 
       // DISPATCH
@@ -117,7 +117,7 @@ class Onboarding extends React.Component {
       createNewWallet,
       recoverOldWallet,
       stopLnd,
-      unlockWallet
+      unlockWallet,
     } = this.props
 
     let formSteps = []
@@ -131,13 +131,13 @@ class Onboarding extends React.Component {
           <Wizard.Step
             key="SeedView"
             component={SeedView}
-            {...{ seed, fetchSeed, fetchingSeed }}
+            {...{ seed, fetchSeed, isFetchingSeed }}
           />,
           <Wizard.Step key="SeedConfirm" component={SeedConfirm} {...{ seed }} />,
           <Wizard.Step key="Password" component={Password} {...{ setPassword }} />,
           <Wizard.Step key="Name" component={Name} {...{ name, setName }} />,
           <Wizard.Step key="Autopilot" component={Autopilot} {...{ autopilot, setAutopilot }} />,
-          <Wizard.Step key="WalletCreate" component={WalletCreate} {...{ createNewWallet }} />
+          <Wizard.Step key="WalletCreate" component={WalletCreate} {...{ createNewWallet }} />,
         ]
         break
 
@@ -151,7 +151,7 @@ class Onboarding extends React.Component {
           <Wizard.Step key="Password" component={Password} {...{ setPassword }} />,
           <Wizard.Step key="Name" component={Name} {...{ name, setName }} />,
           <Wizard.Step key="Autopilot" component={Autopilot} {...{ autopilot, setAutopilot }} />,
-          <Wizard.Step key="WalletRecover" component={WalletRecover} {...{ recoverOldWallet }} />
+          <Wizard.Step key="WalletRecover" component={WalletRecover} {...{ recoverOldWallet }} />,
         ]
         break
 
@@ -180,7 +180,7 @@ class Onboarding extends React.Component {
               clearStartLndError,
               validateHost,
               validateCert,
-              validateMacaroon
+              validateMacaroon,
             }}
           />,
           <Wizard.Step
@@ -193,19 +193,19 @@ class Onboarding extends React.Component {
               connectionMacaroon,
               connectionString,
               lndConnect,
-              lightningGrpcActive,
-              walletUnlockerGrpcActive,
+              isLightningGrpcActive,
+              isWalletUnlockerGrpcActive,
               startLndHostError,
               startLndCertError,
               startLndMacaroonError,
-              startLnd
+              startLnd,
             }}
           />,
           <Wizard.Step
             key="Login"
             component={Login}
             {...{ unlockWallet, setUnlockWalletError, unlockWalletError }}
-          />
+          />,
         ]
         break
     }
@@ -216,7 +216,7 @@ class Onboarding extends React.Component {
         component={ConnectionType}
         {...{ connectionType, setConnectionType, lndConnect, resetOnboarding, stopLnd }}
       />,
-      ...formSteps
+      ...formSteps,
     ]
     return steps
   }
@@ -244,12 +244,12 @@ class Onboarding extends React.Component {
   }
 
   render() {
-    const { connectionType, onboarded } = this.props
+    const { connectionType, isOnboarded } = this.props
     const steps = this.getSteps()
     const previousStep = this.getPreviousStep()
     const backButtonText = this.getBackButtonText()
 
-    if (onboarded) {
+    if (isOnboarded) {
       return <Redirect to={['create', 'import'].includes(connectionType) ? '/syncing' : '/app'} />
     }
 
@@ -257,7 +257,7 @@ class Onboarding extends React.Component {
       <Wizard steps={steps}>
         <Flex css={{ height: '100%' }}>
           <Panel width={1}>
-            <Panel.Body width={9 / 16} mx="auto">
+            <Panel.Body mx="auto" width={9 / 16}>
               <Wizard.Steps />
             </Panel.Body>
 
diff --git a/app/components/Onboarding/Steps/Alias.js b/app/components/Onboarding/Steps/Alias.js
index 22834f31311..8083aed7d49 100644
--- a/app/components/Onboarding/Steps/Alias.js
+++ b/app/components/Onboarding/Steps/Alias.js
@@ -7,17 +7,17 @@ import messages from './messages'
 
 class Alias extends React.Component {
   static propTypes = {
+    alias: PropTypes.string,
     intl: intlShape.isRequired,
+    setAlias: PropTypes.func.isRequired,
     wizardApi: PropTypes.object,
     wizardState: PropTypes.object,
-    alias: PropTypes.string,
-    setAlias: PropTypes.func.isRequired
   }
 
   static defaultProps = {
     wizardApi: {},
     wizardState: {},
-    alias: ''
+    alias: '',
   }
 
   setFormApi = formApi => {
@@ -57,20 +57,20 @@ class Alias extends React.Component {
           return (
             <>
               <Header
-                title={<FormattedMessage {...messages.alias_title} />}
-                subtitle={<FormattedMessage {...messages.alias_description} />}
                 align="left"
+                subtitle={<FormattedMessage {...messages.alias_description} />}
+                title={<FormattedMessage {...messages.alias_title} />}
               />
               <Bar my={4} />
               <Box>
                 <Input
-                  autoFocus
                   field="alias"
-                  name="alias"
-                  label={<FormattedMessage {...messages.alias_label} />}
                   initialValue={alias}
+                  label={<FormattedMessage {...messages.alias_label} />}
+                  name="alias"
                   validateOnBlur={shouldValidateInline}
                   validateOnChange={shouldValidateInline}
+                  willAutoFocus
                 />
               </Box>
             </>
diff --git a/app/components/Onboarding/Steps/Autopilot.js b/app/components/Onboarding/Steps/Autopilot.js
index a14992e18f5..12519b01ed2 100644
--- a/app/components/Onboarding/Steps/Autopilot.js
+++ b/app/components/Onboarding/Steps/Autopilot.js
@@ -6,16 +6,16 @@ import messages from './messages'
 
 class Autopilot extends React.Component {
   static propTypes = {
+    autopilot: PropTypes.bool, // eslint-disable-line react/boolean-prop-naming
+    setAutopilot: PropTypes.func.isRequired,
     wizardApi: PropTypes.object,
     wizardState: PropTypes.object,
-    autopilot: PropTypes.bool,
-    setAutopilot: PropTypes.func.isRequired
   }
 
   static defaultProps = {
     wizardApi: {},
     wizardState: {},
-    autopilot: 'enable'
+    autopilot: 'enable',
   }
 
   handleSubmit = values => {
@@ -50,20 +50,20 @@ class Autopilot extends React.Component {
         onSubmitFailure={onSubmitFailure}
       >
         <Header
-          title={<FormattedMessage {...messages.autopilot_title} />}
-          subtitle={<FormattedMessage {...messages.autopilot_description} />}
           align="left"
+          subtitle={<FormattedMessage {...messages.autopilot_description} />}
+          title={<FormattedMessage {...messages.autopilot_title} />}
         />
         <Bar my={4} />
         <RadioGroup
-          required
           field="autopilot"
-          name="autopilot"
           initialValue={autopilot ? 'enable' : 'disable'}
+          isRequired
+          name="autopilot"
         >
-          <Radio value="enable" label={<FormattedMessage {...messages.enable} />} />
+          <Radio label={<FormattedMessage {...messages.enable} />} value="enable" />
 
-          <Radio value="disable" label={<FormattedMessage {...messages.disable} />} />
+          <Radio label={<FormattedMessage {...messages.disable} />} value="disable" />
         </RadioGroup>
       </Form>
     )
diff --git a/app/components/Onboarding/Steps/ConnectionConfirm.js b/app/components/Onboarding/Steps/ConnectionConfirm.js
index 78183e6b133..d3421d90576 100644
--- a/app/components/Onboarding/Steps/ConnectionConfirm.js
+++ b/app/components/Onboarding/Steps/ConnectionConfirm.js
@@ -9,25 +9,25 @@ import messages from './messages'
 
 class ConnectionConfirm extends React.Component {
   static propTypes = {
-    wizardApi: PropTypes.object,
-    wizardState: PropTypes.object,
-    connectionType: PropTypes.string.isRequired,
-    connectionHost: PropTypes.string,
     connectionCert: PropTypes.string,
+    connectionHost: PropTypes.string,
     connectionMacaroon: PropTypes.string,
     connectionString: PropTypes.string,
+    connectionType: PropTypes.string.isRequired,
+    isLightningGrpcActive: PropTypes.bool,
+    isWalletUnlockerGrpcActive: PropTypes.bool,
     lndConnect: PropTypes.string,
-    startLndHostError: PropTypes.string,
+    startLnd: PropTypes.func.isRequired,
     startLndCertError: PropTypes.string,
+    startLndHostError: PropTypes.string,
     startLndMacaroonError: PropTypes.string,
-    startLnd: PropTypes.func.isRequired,
-    walletUnlockerGrpcActive: PropTypes.bool,
-    lightningGrpcActive: PropTypes.bool
+    wizardApi: PropTypes.object,
+    wizardState: PropTypes.object,
   }
 
   static defaultProps = {
     wizardApi: {},
-    wizardState: {}
+    wizardState: {},
   }
 
   componentDidUpdate(prevProps) {
@@ -43,7 +43,7 @@ class ConnectionConfirm extends React.Component {
       connectionCert,
       connectionMacaroon,
       connectionString,
-      startLnd
+      startLnd,
     } = this.props
 
     // If we have a hostname, assume we are using the custom form in which host, cer and macaroon paths are supplied.
@@ -54,8 +54,8 @@ class ConnectionConfirm extends React.Component {
         lndconnectUri: encode({
           host: connectionHost,
           cert: connectionCert,
-          macaroon: connectionMacaroon
-        })
+          macaroon: connectionMacaroon,
+        }),
       })
     }
 
@@ -64,7 +64,7 @@ class ConnectionConfirm extends React.Component {
       return startLnd({
         type: 'custom',
         decoder: 'lnd.lndconnect.v1',
-        lndconnectUri: connectionString
+        lndconnectUri: connectionString,
       })
     }
 
@@ -75,8 +75,8 @@ class ConnectionConfirm extends React.Component {
       decoder: 'lnd.lndconnect.v1',
       lndconnectUri: encode({
         host: `${host}:${port}`,
-        macaroon
-      })
+        macaroon,
+      }),
     })
   }
 
@@ -90,8 +90,8 @@ class ConnectionConfirm extends React.Component {
       connectionMacaroon,
       connectionString,
       lndConnect,
-      lightningGrpcActive,
-      walletUnlockerGrpcActive,
+      isLightningGrpcActive,
+      isWalletUnlockerGrpcActive,
       startLndHostError,
       startLndCertError,
       startLndMacaroonError,
@@ -134,9 +134,9 @@ class ConnectionConfirm extends React.Component {
         onSubmitFailure={onSubmitFailure}
       >
         <Header
-          title={<FormattedMessage {...messages.confirm_connection_title} />}
-          subtitle={<FormattedMessage {...messages.confirm_connection_description} />}
           align="left"
+          subtitle={<FormattedMessage {...messages.confirm_connection_description} />}
+          title={<FormattedMessage {...messages.confirm_connection_title} />}
         />
 
         <Bar my={4} />
diff --git a/app/components/Onboarding/Steps/ConnectionDetails.js b/app/components/Onboarding/Steps/ConnectionDetails.js
index ff0e852b30b..80c9ad83ba2 100644
--- a/app/components/Onboarding/Steps/ConnectionDetails.js
+++ b/app/components/Onboarding/Steps/ConnectionDetails.js
@@ -8,29 +8,29 @@ import { FORM_TYPE_CONNECTION_STRING, FORM_TYPE_MANUAL } from './constants'
 
 class ConnectionDetails extends React.Component {
   state = {
-    formType: null
+    formType: null,
   }
 
   static propTypes = {
-    wizardApi: PropTypes.object,
-    wizardState: PropTypes.object,
-    connectionHost: PropTypes.string,
+    clearStartLndError: PropTypes.func.isRequired,
     connectionCert: PropTypes.string,
+    connectionHost: PropTypes.string,
     connectionMacaroon: PropTypes.string,
     connectionString: PropTypes.string,
-    startLndHostError: PropTypes.string,
-    startLndCertError: PropTypes.string,
-    startLndMacaroonError: PropTypes.string,
     lndConnect: PropTypes.string,
-    setLndconnect: PropTypes.func.isRequired,
-    setConnectionHost: PropTypes.func.isRequired,
     setConnectionCert: PropTypes.func.isRequired,
+    setConnectionHost: PropTypes.func.isRequired,
     setConnectionMacaroon: PropTypes.func.isRequired,
     setConnectionString: PropTypes.func.isRequired,
-    clearStartLndError: PropTypes.func.isRequired,
-    validateHost: PropTypes.func.isRequired,
+    setLndconnect: PropTypes.func.isRequired,
+    startLndCertError: PropTypes.string,
+    startLndHostError: PropTypes.string,
+    startLndMacaroonError: PropTypes.string,
     validateCert: PropTypes.func.isRequired,
-    validateMacaroon: PropTypes.func.isRequired
+    validateHost: PropTypes.func.isRequired,
+    validateMacaroon: PropTypes.func.isRequired,
+    wizardApi: PropTypes.object,
+    wizardState: PropTypes.object,
   }
 
   componentDidMount() {
@@ -49,7 +49,7 @@ class ConnectionDetails extends React.Component {
       setConnectionHost,
       setConnectionCert,
       setConnectionMacaroon,
-      setConnectionString
+      setConnectionString,
     } = this.props
     const { formType } = this.state
     if (formType && formType !== prevState.formType && prevState.formType) {
@@ -94,7 +94,7 @@ class ConnectionDetails extends React.Component {
       clearStartLndError,
       validateHost,
       validateCert,
-      validateMacaroon
+      validateMacaroon,
     } = this.props
     const { formType } = this.state
 
@@ -107,42 +107,42 @@ class ConnectionDetails extends React.Component {
         <ConnectionDetailsContext.Provider
           value={{
             formType,
-            openModal: this.openModal
+            openModal: this.openModal,
           }}
         >
           {formType === FORM_TYPE_CONNECTION_STRING ? (
             <ConnectionDetailsString
-              wizardApi={wizardApi}
-              wizardState={wizardState}
+              clearStartLndError={clearStartLndError}
               connectionString={connectionString}
-              startLndHostError={startLndHostError}
-              startLndCertError={startLndCertError}
-              startLndMacaroonError={startLndMacaroonError}
               lndConnect={lndConnect}
-              setLndconnect={setLndconnect}
               setConnectionString={setConnectionString}
-              clearStartLndError={clearStartLndError}
+              setLndconnect={setLndconnect}
+              startLndCertError={startLndCertError}
+              startLndHostError={startLndHostError}
+              startLndMacaroonError={startLndMacaroonError}
+              wizardApi={wizardApi}
+              wizardState={wizardState}
             />
           ) : (
             <ConnectionDetailsManual
-              wizardApi={wizardApi}
-              wizardState={wizardState}
-              connectionHost={connectionHost}
+              clearStartLndError={clearStartLndError}
               connectionCert={connectionCert}
+              connectionHost={connectionHost}
               connectionMacaroon={connectionMacaroon}
               connectionString={connectionString}
-              startLndHostError={startLndHostError}
-              startLndCertError={startLndCertError}
-              startLndMacaroonError={startLndMacaroonError}
               lndConnect={lndConnect}
-              setLndconnect={setLndconnect}
-              setConnectionHost={setConnectionHost}
               setConnectionCert={setConnectionCert}
+              setConnectionHost={setConnectionHost}
               setConnectionMacaroon={setConnectionMacaroon}
-              clearStartLndError={clearStartLndError}
-              validateHost={validateHost}
+              setLndconnect={setLndconnect}
+              startLndCertError={startLndCertError}
+              startLndHostError={startLndHostError}
+              startLndMacaroonError={startLndMacaroonError}
               validateCert={validateCert}
+              validateHost={validateHost}
               validateMacaroon={validateMacaroon}
+              wizardApi={wizardApi}
+              wizardState={wizardState}
             />
           )}
         </ConnectionDetailsContext.Provider>
diff --git a/app/components/Onboarding/Steps/ConnectionDetailsContext.js b/app/components/Onboarding/Steps/ConnectionDetailsContext.js
index 9c7003a8df3..ddd9808139c 100644
--- a/app/components/Onboarding/Steps/ConnectionDetailsContext.js
+++ b/app/components/Onboarding/Steps/ConnectionDetailsContext.js
@@ -1,7 +1,7 @@
 import { createContext } from 'react'
 
 const ConnectionDetailsContext = createContext({
-  openModal: () => {}
+  openModal: () => {},
 })
 
 export default ConnectionDetailsContext
diff --git a/app/components/Onboarding/Steps/ConnectionDetailsManual.js b/app/components/Onboarding/Steps/ConnectionDetailsManual.js
index 5c159204bb3..3d157c6d413 100644
--- a/app/components/Onboarding/Steps/ConnectionDetailsManual.js
+++ b/app/components/Onboarding/Steps/ConnectionDetailsManual.js
@@ -7,30 +7,30 @@ import messages from './messages'
 
 class ConnectionDetailsManual extends React.Component {
   static propTypes = {
-    wizardApi: PropTypes.object,
-    wizardState: PropTypes.object,
-    connectionHost: PropTypes.string,
+    clearStartLndError: PropTypes.func.isRequired,
     connectionCert: PropTypes.string,
+    connectionHost: PropTypes.string,
     connectionMacaroon: PropTypes.string,
     connectionString: PropTypes.string,
-    startLndHostError: PropTypes.string,
-    startLndCertError: PropTypes.string,
-    startLndMacaroonError: PropTypes.string,
     lndConnect: PropTypes.string,
-
-    setLndconnect: PropTypes.func.isRequired,
-    setConnectionHost: PropTypes.func.isRequired,
     setConnectionCert: PropTypes.func.isRequired,
+    setConnectionHost: PropTypes.func.isRequired,
     setConnectionMacaroon: PropTypes.func.isRequired,
-    clearStartLndError: PropTypes.func.isRequired,
-    validateHost: PropTypes.func.isRequired,
+    setLndconnect: PropTypes.func.isRequired,
+
+    startLndCertError: PropTypes.string,
+    startLndHostError: PropTypes.string,
+    startLndMacaroonError: PropTypes.string,
     validateCert: PropTypes.func.isRequired,
-    validateMacaroon: PropTypes.func.isRequired
+    validateHost: PropTypes.func.isRequired,
+    validateMacaroon: PropTypes.func.isRequired,
+    wizardApi: PropTypes.object,
+    wizardState: PropTypes.object,
   }
 
   static defaultProps = {
     wizardApi: {},
-    wizardState: {}
+    wizardState: {},
   }
 
   componentDidMount() {
@@ -38,7 +38,7 @@ class ConnectionDetailsManual extends React.Component {
       startLndHostError,
       startLndCertError,
       startLndMacaroonError,
-      clearStartLndError
+      clearStartLndError,
     } = this.props
 
     // If at least one of the fields has an error, set them all as touched so that they get highlighted.
@@ -176,56 +176,56 @@ class ConnectionDetailsManual extends React.Component {
           return (
             <>
               <Header
-                title={<FormattedMessage {...messages.connection_details_custom_title} />}
-                subtitle={<FormattedMessage {...messages.connection_details_custom_description} />}
                 align="left"
+                subtitle={<FormattedMessage {...messages.connection_details_custom_description} />}
+                title={<FormattedMessage {...messages.connection_details_custom_title} />}
               />
 
-              <Bar mt={4} mb={1} />
+              <Bar mb={1} mt={4} />
 
               <ConnectionDetailsTabs mb={3} />
 
               <Input
-                autoFocus
-                field="connectionHost"
-                name="connectionHost"
-                mb={3}
-                label={<FormattedMessage {...messages.hostname_title} />}
+                asyncValidate={this.validateHost}
                 description={<FormattedMessage {...messages.hostname_description} />}
+                field="connectionHost"
                 initialValue={connectionHost}
+                isRequired
+                label={<FormattedMessage {...messages.hostname_title} />}
+                mb={3}
+                name="connectionHost"
                 onValueChange={this.handleConnectionHostChange}
                 validateOnBlur={shouldValidateInline}
                 validateOnChange={shouldValidateInline}
-                asyncValidate={this.validateHost}
-                required
+                willAutoFocus
               />
 
               <OpenDialogInput
-                field="connectionCert"
-                name="connectionCert"
-                width={1}
-                label={<FormattedMessage {...messages.cert_title} />}
+                asyncValidate={this.validateCert}
                 description={<FormattedMessage {...messages.cert_description} />}
+                field="connectionCert"
                 initialValue={connectionCert}
+                isRequired
+                label={<FormattedMessage {...messages.cert_title} />}
+                name="connectionCert"
                 onValueChange={this.handleConnectionCertChange}
                 validateOnBlur={shouldValidateInline}
                 validateOnChange={shouldValidateInline}
-                asyncValidate={this.validateCert}
-                required
+                width={1}
               />
 
               <OpenDialogInput
-                field="connectionMacaroon"
-                name="connectionMacaroon"
-                label="Macaroon"
-                width={1}
+                asyncValidate={this.validateMacaroon}
                 description={<FormattedMessage {...messages.macaroon_description} />}
+                field="connectionMacaroon"
                 initialValue={connectionMacaroon}
+                isRequired
+                label="Macaroon"
+                name="connectionMacaroon"
                 onValueChange={this.handleConnectionMacaroonChange}
                 validateOnBlur={shouldValidateInline}
                 validateOnChange={shouldValidateInline}
-                asyncValidate={this.validateMacaroon}
-                required
+                width={1}
               />
             </>
           )
diff --git a/app/components/Onboarding/Steps/ConnectionDetailsString.js b/app/components/Onboarding/Steps/ConnectionDetailsString.js
index a9b84aee165..ba1d1c39873 100644
--- a/app/components/Onboarding/Steps/ConnectionDetailsString.js
+++ b/app/components/Onboarding/Steps/ConnectionDetailsString.js
@@ -8,22 +8,22 @@ import messages from './messages'
 
 class ConnectionDetailsString extends React.Component {
   static propTypes = {
-    wizardApi: PropTypes.object,
-    wizardState: PropTypes.object,
+    clearStartLndError: PropTypes.func.isRequired,
     connectionString: PropTypes.string,
-    startLndHostError: PropTypes.string,
-    startLndCertError: PropTypes.string,
-    startLndMacaroonError: PropTypes.string,
     lndConnect: PropTypes.string,
-
-    setLndconnect: PropTypes.func.isRequired,
     setConnectionString: PropTypes.func.isRequired,
-    clearStartLndError: PropTypes.func.isRequired
+    setLndconnect: PropTypes.func.isRequired,
+    startLndCertError: PropTypes.string,
+    startLndHostError: PropTypes.string,
+
+    startLndMacaroonError: PropTypes.string,
+    wizardApi: PropTypes.object,
+    wizardState: PropTypes.object,
   }
 
   static defaultProps = {
     wizardApi: {},
-    wizardState: {}
+    wizardState: {},
   }
 
   componentDidMount() {
@@ -33,7 +33,7 @@ class ConnectionDetailsString extends React.Component {
       startLndMacaroonError,
       clearStartLndError,
       setLndconnect,
-      lndConnect
+      lndConnect,
     } = this.props
 
     // If we have an lndConnect link, populate the form annd submit immediately.
@@ -132,18 +132,16 @@ class ConnectionDetailsString extends React.Component {
           return (
             <>
               <Header
-                title={<FormattedMessage {...messages.connection_details_custom_title} />}
-                subtitle={<FormattedMessage {...messages.connection_details_custom_description} />}
                 align="left"
+                subtitle={<FormattedMessage {...messages.connection_details_custom_description} />}
+                title={<FormattedMessage {...messages.connection_details_custom_title} />}
               />
 
-              <Bar mt={4} mb={1} />
+              <Bar mb={1} mt={4} />
 
               <ConnectionDetailsTabs mb={4} />
 
               <LndConnectionStringInput
-                autoFocus
-                field="connectionString"
                 description={
                   <>
                     <Box mb={2}>
@@ -155,11 +153,13 @@ class ConnectionDetailsString extends React.Component {
                     </Box>
                   </>
                 }
+                field="connectionString"
                 initialValue={connectionString}
+                isRequired
+                rows="12"
                 validateOnBlur={shouldValidateInline}
                 validateOnChange={shouldValidateInline}
-                required
-                rows="12"
+                willAutoFocus
               />
             </>
           )
diff --git a/app/components/Onboarding/Steps/ConnectionDetailsTabs.js b/app/components/Onboarding/Steps/ConnectionDetailsTabs.js
index d1404670d6a..5998aed16a6 100644
--- a/app/components/Onboarding/Steps/ConnectionDetailsTabs.js
+++ b/app/components/Onboarding/Steps/ConnectionDetailsTabs.js
@@ -9,12 +9,12 @@ class ConnectionDetailsTabs extends React.PureComponent {
   items = [
     {
       key: FORM_TYPE_CONNECTION_STRING,
-      name: <FormattedMessage {...messages.connection_details_tab_lndconnect} />
+      name: <FormattedMessage {...messages.connection_details_tab_lndconnect} />,
     },
     {
       key: FORM_TYPE_MANUAL,
-      name: <FormattedMessage {...messages.connection_details_tab_custom_paths} />
-    }
+      name: <FormattedMessage {...messages.connection_details_tab_custom_paths} />,
+    },
   ]
 
   render() {
@@ -22,7 +22,7 @@ class ConnectionDetailsTabs extends React.PureComponent {
       <ConnectionDetailsContext.Consumer>
         {({ formType, openModal }) => {
           return (
-            <Tabs items={this.items} activeKey={formType} onClick={openModal} {...this.props} />
+            <Tabs activeKey={formType} items={this.items} onClick={openModal} {...this.props} />
           )
         }}
       </ConnectionDetailsContext.Consumer>
diff --git a/app/components/Onboarding/Steps/ConnectionType.js b/app/components/Onboarding/Steps/ConnectionType.js
index e0e0293ef10..ae2d33c0082 100644
--- a/app/components/Onboarding/Steps/ConnectionType.js
+++ b/app/components/Onboarding/Steps/ConnectionType.js
@@ -7,18 +7,18 @@ import messages from './messages'
 
 class ConnectionType extends React.Component {
   static propTypes = {
-    wizardApi: PropTypes.object,
-    wizardState: PropTypes.object,
-    lndConnect: PropTypes.string,
     connectionType: PropTypes.string,
+    lndConnect: PropTypes.string,
     resetOnboarding: PropTypes.func.isRequired,
     setConnectionType: PropTypes.func.isRequired,
-    stopLnd: PropTypes.func.isRequired
+    stopLnd: PropTypes.func.isRequired,
+    wizardApi: PropTypes.object,
+    wizardState: PropTypes.object,
   }
 
   static defaultProps = {
     wizardApi: {},
-    wizardState: {}
+    wizardState: {},
   }
 
   componentDidMount() {
@@ -65,9 +65,9 @@ class ConnectionType extends React.Component {
     return (
       <Box css={{ visibility: lndConnect ? 'hidden' : 'visible' }}>
         <Header
-          title={<FormattedMessage {...messages.connection_title} />}
-          subtitle={<FormattedMessage {...messages.connection_description} />}
           align="left"
+          subtitle={<FormattedMessage {...messages.connection_description} />}
+          title={<FormattedMessage {...messages.connection_title} />}
         />
 
         <Bar my={4} />
@@ -90,29 +90,29 @@ class ConnectionType extends React.Component {
           onSubmitFailure={onSubmitFailure}
         >
           <RadioGroup
-            required
             field="connectionType"
-            name="connectionType"
             initialValue={connectionType}
+            isRequired
+            name="connectionType"
           >
             <Radio
-              value="create"
-              label={<FormattedMessage {...messages.connection_type_create_label} />}
               description={<FormattedMessage {...messages.connection_type_create_description} />}
+              label={<FormattedMessage {...messages.connection_type_create_label} />}
               mb={5}
+              value="create"
             />
 
             <Radio
-              value="import"
-              label={<FormattedMessage {...messages.connection_type_import_label} />}
               description={<FormattedMessage {...messages.connection_type_import_description} />}
+              label={<FormattedMessage {...messages.connection_type_import_label} />}
               mb={5}
+              value="import"
             />
 
             <Radio
-              value="custom"
-              label={<FormattedMessage {...messages.connection_type_custom_label} />}
               description={<FormattedMessage {...messages.connection_type_custom_description} />}
+              label={<FormattedMessage {...messages.connection_type_custom_label} />}
+              value="custom"
             />
           </RadioGroup>
         </Form>
diff --git a/app/components/Onboarding/Steps/Login.js b/app/components/Onboarding/Steps/Login.js
index 98aa0e5e9f8..2fa6968db57 100644
--- a/app/components/Onboarding/Steps/Login.js
+++ b/app/components/Onboarding/Steps/Login.js
@@ -8,17 +8,17 @@ import messages from './messages'
 class Login extends React.Component {
   static propTypes = {
     intl: intlShape.isRequired,
+    setUnlockWalletError: PropTypes.func.isRequired,
+    unlockWallet: PropTypes.func.isRequired,
+    unlockWalletError: PropTypes.string,
     wizardApi: PropTypes.object,
     wizardState: PropTypes.object,
-    unlockWalletError: PropTypes.string,
-    setUnlockWalletError: PropTypes.func.isRequired,
-    unlockWallet: PropTypes.func.isRequired
   }
 
   static defaultProps = {
     wizardApi: {},
     wizardState: {},
-    unlockWalletError: null
+    unlockWalletError: null,
   }
 
   componentDidUpdate(prevProps) {
@@ -79,25 +79,25 @@ class Login extends React.Component {
           return (
             <>
               <Header
-                title={<FormattedMessage {...messages.login_title} />}
-                subtitle={<FormattedMessage {...messages.login_description} />}
                 align="left"
+                subtitle={<FormattedMessage {...messages.login_description} />}
+                title={<FormattedMessage {...messages.login_title} />}
               />
 
               <Bar my={4} />
 
               <Box>
                 <PasswordInput
-                  autoFocus
+                  autoComplete="current-password"
+                  description={<FormattedMessage {...messages.password_description} />}
                   field="password"
-                  name="password"
+                  isRequired
                   label={<FormattedMessage {...messages.password_label} />}
-                  description={<FormattedMessage {...messages.password_description} />}
-                  required
+                  name="password"
+                  placeholder={intl.formatMessage({ ...messages.password_placeholder })}
                   validateOnBlur={shouldValidateInline}
                   validateOnChange={shouldValidateInline}
-                  placeholder={intl.formatMessage({ ...messages.password_placeholder })}
-                  autoComplete="current-password"
+                  willAutoFocus
                 />
               </Box>
             </>
diff --git a/app/components/Onboarding/Steps/Name.js b/app/components/Onboarding/Steps/Name.js
index f5e3243c41a..4eca2b5a6f1 100644
--- a/app/components/Onboarding/Steps/Name.js
+++ b/app/components/Onboarding/Steps/Name.js
@@ -8,16 +8,16 @@ import messages from './messages'
 class Name extends React.Component {
   static propTypes = {
     intl: intlShape.isRequired,
+    name: PropTypes.string,
+    setName: PropTypes.func.isRequired,
     wizardApi: PropTypes.object,
     wizardState: PropTypes.object,
-    name: PropTypes.string,
-    setName: PropTypes.func.isRequired
   }
 
   static defaultProps = {
     wizardApi: {},
     wizardState: {},
-    name: ''
+    name: '',
   }
 
   setFormApi = formApi => {
@@ -57,20 +57,20 @@ class Name extends React.Component {
           return (
             <>
               <Header
-                title={<FormattedMessage {...messages.wallet_name_title} />}
-                subtitle={<FormattedMessage {...messages.wallet_name_description} />}
                 align="left"
+                subtitle={<FormattedMessage {...messages.wallet_name_description} />}
+                title={<FormattedMessage {...messages.wallet_name_title} />}
               />
               <Bar my={4} />
               <Box>
                 <Input
-                  autoFocus
                   field="name"
-                  name="name"
-                  label={<FormattedMessage {...messages.wallet_name_label} />}
                   initialValue={name}
+                  label={<FormattedMessage {...messages.wallet_name_label} />}
+                  name="name"
                   validateOnBlur={shouldValidateInline}
                   validateOnChange={shouldValidateInline}
+                  willAutoFocus
                 />
               </Box>
             </>
diff --git a/app/components/Onboarding/Steps/Password.js b/app/components/Onboarding/Steps/Password.js
index f643fa3a5ae..1ce0245277d 100644
--- a/app/components/Onboarding/Steps/Password.js
+++ b/app/components/Onboarding/Steps/Password.js
@@ -8,14 +8,14 @@ import messages from './messages'
 class Password extends React.Component {
   static propTypes = {
     intl: intlShape.isRequired,
+    setPassword: PropTypes.func.isRequired,
     wizardApi: PropTypes.object,
     wizardState: PropTypes.object,
-    setPassword: PropTypes.func.isRequired
   }
 
   static defaultProps = {
     wizardApi: {},
-    wizardState: {}
+    wizardState: {},
   }
 
   handleSubmit = async values => {
@@ -55,24 +55,24 @@ class Password extends React.Component {
           return (
             <>
               <Header
-                title={<FormattedMessage {...messages.create_wallet_password_title} />}
-                subtitle={<FormattedMessage {...messages.create_wallet_password_description} />}
                 align="left"
+                subtitle={<FormattedMessage {...messages.create_wallet_password_description} />}
+                title={<FormattedMessage {...messages.create_wallet_password_title} />}
               />
 
               <Bar my={4} />
 
               <Box>
                 <PasswordInput
-                  autoFocus
+                  autoComplete="current-password"
                   field="password"
-                  name="password"
+                  isRequired
                   label={<FormattedMessage {...messages.password_label} />}
-                  required
+                  name="password"
+                  placeholder={intl.formatMessage({ ...messages.password_placeholder })}
                   validateOnBlur={shouldValidateInline}
                   validateOnChange={shouldValidateInline}
-                  placeholder={intl.formatMessage({ ...messages.password_placeholder })}
-                  autoComplete="current-password"
+                  willAutoFocus
                 />
               </Box>
             </>
diff --git a/app/components/Onboarding/Steps/Recover.js b/app/components/Onboarding/Steps/Recover.js
index 00c42ee93d8..cbbd8b8b528 100644
--- a/app/components/Onboarding/Steps/Recover.js
+++ b/app/components/Onboarding/Steps/Recover.js
@@ -12,7 +12,7 @@ class SeedWord extends React.Component {
   static propTypes = {
     index: PropTypes.number.isRequired,
     intl: intlShape.isRequired,
-    word: PropTypes.string
+    word: PropTypes.string,
   }
 
   validateWord = value => {
@@ -22,19 +22,19 @@ class SeedWord extends React.Component {
   render() {
     const { index, intl, word } = this.props
     return (
-      <Flex key={`word${index}`} justifyContent="flex-start" alignItems="center" as="li" my={1}>
-        <Label htmlFor={`word${index}`} width={35} mb={0}>
+      <Flex key={`word${index}`} alignItems="center" as="li" justifyContent="flex-start" my={1}>
+        <Label htmlFor={`word${index}`} mb={0} width={35}>
           {index}
         </Label>
         <Input
-          autoFocus={index === 1}
-          initialValue={word}
           field={`word${index}`}
+          hasMessage={false}
+          initialValue={word}
+          placeholder={intl.formatMessage({ ...messages.word_placeholder })}
           validate={this.validateWord}
-          variant="thin"
           validateOnChange
-          placeholder={intl.formatMessage({ ...messages.word_placeholder })}
-          showMessage={false}
+          variant="thin"
+          willAutoFocus={index === 1}
         />
       </Flex>
     )
@@ -45,16 +45,16 @@ const SeedWordWithIntl = injectIntl(SeedWord)
 
 class Recover extends React.Component {
   static propTypes = {
-    wizardApi: PropTypes.object,
-    wizardState: PropTypes.object,
+    intl: intlShape.isRequired,
     seed: PropTypes.array.isRequired,
     setSeed: PropTypes.func.isRequired,
-    intl: intlShape.isRequired
+    wizardApi: PropTypes.object,
+    wizardState: PropTypes.object,
   }
 
   static defaultProps = {
     wizardApi: {},
-    wizardState: {}
+    wizardState: {},
   }
 
   handleSubmit = async values => {
@@ -89,30 +89,30 @@ class Recover extends React.Component {
         onSubmitFailure={onSubmitFailure}
       >
         <Header
-          title={<FormattedMessage {...messages.import_title} />}
-          subtitle={<FormattedMessage {...messages.import_description} />}
           align="left"
+          subtitle={<FormattedMessage {...messages.import_description} />}
+          title={<FormattedMessage {...messages.import_title} />}
         />
 
         <Bar my={4} />
 
         <Flex justifyContent="space-between">
-          <Flex flexDirection="column" as="ul" mr={2}>
+          <Flex as="ul" flexDirection="column" mr={2}>
             {indexes.slice(0, 6).map(word => (
               <SeedWordWithIntl key={word + 1} index={word + 1} word={seed[word]} />
             ))}
           </Flex>
-          <Flex flexDirection="column" as="ul" mx={2}>
+          <Flex as="ul" flexDirection="column" mx={2}>
             {indexes.slice(6, 12).map(word => (
               <SeedWordWithIntl key={word + 1} index={word + 1} word={seed[word]} />
             ))}
           </Flex>
-          <Flex flexDirection="column" as="ul" mx={2}>
+          <Flex as="ul" flexDirection="column" mx={2}>
             {indexes.slice(12, 18).map(word => (
               <SeedWordWithIntl key={word + 1} index={word + 1} word={seed[word]} />
             ))}
           </Flex>
-          <Flex flexDirection="column" as="ul" ml={2}>
+          <Flex as="ul" flexDirection="column" ml={2}>
             {indexes.slice(18, 24).map(word => (
               <SeedWordWithIntl key={word + 1} index={word + 1} word={seed[word]} />
             ))}
diff --git a/app/components/Onboarding/Steps/SeedConfirm.js b/app/components/Onboarding/Steps/SeedConfirm.js
index c327db83e01..ea6b5ccf087 100644
--- a/app/components/Onboarding/Steps/SeedConfirm.js
+++ b/app/components/Onboarding/Steps/SeedConfirm.js
@@ -7,19 +7,19 @@ import messages from './messages'
 
 class SeedConfirm extends React.Component {
   state = {
-    seedWordIndexes: []
+    seedWordIndexes: [],
   }
 
   static propTypes = {
     intl: intlShape.isRequired,
+    seed: PropTypes.array.isRequired,
     wizardApi: PropTypes.object,
     wizardState: PropTypes.object,
-    seed: PropTypes.array.isRequired
   }
 
   static defaultProps = {
     wizardApi: {},
-    wizardState: {}
+    wizardState: {},
   }
 
   componentDidMount() {
@@ -42,16 +42,16 @@ class SeedConfirm extends React.Component {
   }
 
   handleWordChange = (value, fieldIndex, wordIndex) => {
-    // If the word has been determined as valid, mark the field touched to trigger field highlighting.
     const error = this.validateWord(wordIndex, value)
-    if (!error) {
-      this.formApi.setTouched(`word${fieldIndex}`, true)
-    }
-    // Otherwise reset the field state to prevent highlighting as valid.
-    else {
+    // reset the field state to prevent highlighting as valid.
+    if (error) {
       this.formApi.setTouched(`word${fieldIndex}`, false)
       this.formApi.setError(`word${fieldIndex}`, null)
     }
+    // Otherwise the word has been determined as valid, mark the field touched to trigger field highlighting.
+    else {
+      this.formApi.setTouched(`word${fieldIndex}`, true)
+    }
   }
 
   validateWord = (index, word) => {
@@ -79,18 +79,18 @@ class SeedConfirm extends React.Component {
         onSubmitFailure={onSubmitFailure}
       >
         <Header
-          title={<FormattedMessage {...messages.retype_seed_title} />}
+          align="left"
           subtitle={
             <FormattedMessage
               {...messages.retype_seed_description}
               values={{
                 word1: seedWordIndexes[0],
                 word2: seedWordIndexes[1],
-                word3: seedWordIndexes[2]
+                word3: seedWordIndexes[2],
               }}
             />
           }
-          align="left"
+          title={<FormattedMessage {...messages.retype_seed_title} />}
         />
 
         <Bar my={4} />
@@ -99,18 +99,18 @@ class SeedConfirm extends React.Component {
           // Only validate if the word has been entered correctly already or the form has been submitted.
           return (
             <Flex key={`word${index}`} justifyContent="flex-start" mb={3}>
-              <Label htmlFor="alias" width={25} mt={18}>
+              <Label htmlFor="alias" mt={18} width={25}>
                 {wordIndex}
               </Label>
               <Input
                 field={`word${index}`}
                 name={`word${index}`}
-                validateOnBlur
-                validateOnChange
-                validate={value => this.validateWord.call(null, wordIndex - 1, value)}
                 onChange={e => this.handleWordChange(e.target.value, index, wordIndex - 1)}
                 placeholder={intl.formatMessage({ ...messages.word_placeholder })}
-                autoFocus={index === 0}
+                validate={value => this.validateWord.call(null, wordIndex - 1, value)}
+                validateOnBlur
+                validateOnChange
+                willAutoFocus={index === 0}
               />
             </Flex>
           )
diff --git a/app/components/Onboarding/Steps/SeedView.js b/app/components/Onboarding/Steps/SeedView.js
index a5abad7d1ad..018d0262c16 100644
--- a/app/components/Onboarding/Steps/SeedView.js
+++ b/app/components/Onboarding/Steps/SeedView.js
@@ -18,24 +18,24 @@ const SeedWord = ({ index, word }) => (
 )
 SeedWord.propTypes = {
   index: PropTypes.number.isRequired,
-  word: PropTypes.string.isRequired
+  word: PropTypes.string.isRequired,
 }
 
 class SeedView extends React.Component {
   static propTypes = {
+    fetchSeed: PropTypes.func.isRequired,
+    intl: intlShape.isRequired,
+    isFetchingSeed: PropTypes.bool,
+    seed: PropTypes.array,
     wizardApi: PropTypes.object,
     wizardState: PropTypes.object,
-    seed: PropTypes.array,
-    fetchingSeed: PropTypes.bool,
-    intl: intlShape.isRequired,
-    fetchSeed: PropTypes.func.isRequired
   }
 
   static defaultProps = {
     wizardApi: {},
     wizardState: {},
     seed: [],
-    fetchingSeed: false
+    isFetchingSeed: false,
   }
 
   componentDidMount() {
@@ -46,11 +46,11 @@ class SeedView extends React.Component {
   }
 
   componentDidUpdate(prevProps) {
-    const { fetchingSeed, seed } = this.props
+    const { isFetchingSeed, seed } = this.props
     if (seed && seed !== prevProps.seed) {
       this.formApi.setValue('seed', seed)
     }
-    if (fetchingSeed && fetchingSeed !== prevProps.fetchingSeed) {
+    if (isFetchingSeed && isFetchingSeed !== prevProps.isFetchingSeed) {
       this.formApi.setValue('seed', null)
       this.formApi.setTouched('seed', true)
     }
@@ -61,7 +61,7 @@ class SeedView extends React.Component {
   }
 
   render() {
-    const { wizardApi, wizardState, seed, fetchSeed, fetchingSeed, intl, ...rest } = this.props
+    const { wizardApi, wizardState, seed, fetchSeed, isFetchingSeed, intl, ...rest } = this.props
     const { getApi, onChange, onSubmit, onSubmitFailure } = wizardApi
     const { currentItem } = wizardState
 
@@ -81,43 +81,43 @@ class SeedView extends React.Component {
         {() => (
           <>
             <Header
-              title={<FormattedMessage {...messages.save_seed_title} />}
-              subtitle={<FormattedMessage {...messages.save_seed_description} />}
               align="left"
+              subtitle={<FormattedMessage {...messages.save_seed_description} />}
+              title={<FormattedMessage {...messages.save_seed_title} />}
             />
             <Bar my={4} />
 
-            {fetchingSeed && (
+            {isFetchingSeed && (
               <Text textAlign="center">
                 <Spinner />
                 <FormattedMessage {...messages.generating_seed} />
               </Text>
             )}
-            {!fetchingSeed && seed.length > 0 && (
+            {!isFetchingSeed && seed.length > 0 && (
               <>
                 <Flex justifyContent="space-between">
-                  <Flex flexDirection="column" as="ul">
+                  <Flex as="ul" flexDirection="column">
                     {seed.slice(0, 6).map((word, index) => (
                       <SeedWord key={index} index={index + 1} word={word} />
                     ))}
                   </Flex>
-                  <Flex flexDirection="column" as="ul">
+                  <Flex as="ul" flexDirection="column">
                     {seed.slice(6, 12).map((word, index) => (
                       <SeedWord key={index} index={index + 7} word={word} />
                     ))}
                   </Flex>
-                  <Flex flexDirection="column" as="ul">
+                  <Flex as="ul" flexDirection="column">
                     {seed.slice(12, 18).map((word, index) => (
                       <SeedWord key={index} index={index + 13} word={word} />
                     ))}
                   </Flex>
-                  <Flex flexDirection="column" as="ul">
+                  <Flex as="ul" flexDirection="column">
                     {seed.slice(18, 24).map((word, index) => (
                       <SeedWord key={index} index={index + 19} word={word} />
                     ))}
                   </Flex>
                 </Flex>
-                <Message variant="warning" justifyContent="center" mt={3}>
+                <Message justifyContent="center" mt={3} variant="warning">
                   <FormattedMessage {...messages.seed_warning} />
                 </Message>
               </>
@@ -125,11 +125,11 @@ class SeedView extends React.Component {
 
             <Input
               field="seed"
+              isRequired
               name="seed"
               type="hidden"
               validateOnBlur
               validateOnChange
-              required
             />
           </>
         )}
diff --git a/app/components/Onboarding/Steps/WalletCreate.js b/app/components/Onboarding/Steps/WalletCreate.js
index 9209344ac90..caa5d21bfaf 100644
--- a/app/components/Onboarding/Steps/WalletCreate.js
+++ b/app/components/Onboarding/Steps/WalletCreate.js
@@ -4,15 +4,15 @@ import { Form, Spinner, Text } from 'components/UI'
 
 class WalletCreate extends React.Component {
   static propTypes = {
+    createNewWallet: PropTypes.func.isRequired,
+    setWalletCreate: PropTypes.func.isRequired,
     wizardApi: PropTypes.object,
     wizardState: PropTypes.object,
-    createNewWallet: PropTypes.func.isRequired,
-    setWalletCreate: PropTypes.func.isRequired
   }
 
   static defaultProps = {
     wizardApi: {},
-    wizardState: {}
+    wizardState: {},
   }
 
   componentDidMount() {
diff --git a/app/components/Onboarding/Steps/WalletRecover.js b/app/components/Onboarding/Steps/WalletRecover.js
index 55b3deb440d..a3ed6406e8a 100644
--- a/app/components/Onboarding/Steps/WalletRecover.js
+++ b/app/components/Onboarding/Steps/WalletRecover.js
@@ -6,15 +6,15 @@ import messages from './messages'
 
 class WalletRecover extends React.Component {
   static propTypes = {
+    recoverOldWallet: PropTypes.func.isRequired,
+    setWalletRecover: PropTypes.func.isRequired,
     wizardApi: PropTypes.object,
     wizardState: PropTypes.object,
-    recoverOldWallet: PropTypes.func.isRequired,
-    setWalletRecover: PropTypes.func.isRequired
   }
 
   static defaultProps = {
     wizardApi: {},
-    wizardState: {}
+    wizardState: {},
   }
 
   componentDidMount() {
diff --git a/app/components/Onboarding/Steps/messages.js b/app/components/Onboarding/Steps/messages.js
index 3eb73628cd5..ae88349227d 100644
--- a/app/components/Onboarding/Steps/messages.js
+++ b/app/components/Onboarding/Steps/messages.js
@@ -87,5 +87,5 @@ export default defineMessages({
   wallet_name_label: 'Wallet Name',
   word_placeholder: 'word',
   generating_seed: 'Generating Seed...',
-  importing_wallet: 'Importing wallet...'
+  importing_wallet: 'Importing wallet...',
 })
diff --git a/app/components/Onboarding/messages.js b/app/components/Onboarding/messages.js
index 5dbbbbb8ef6..6bb6a9e047b 100644
--- a/app/components/Onboarding/messages.js
+++ b/app/components/Onboarding/messages.js
@@ -4,5 +4,5 @@ import { defineMessages } from 'react-intl'
 export default defineMessages({
   next: 'Next',
   previous: 'Back',
-  start_over: 'Start over'
+  start_over: 'Start over',
 })
diff --git a/app/components/Pay/Pay.js b/app/components/Pay/Pay.js
index 56d95ffdbb4..028bc442090 100644
--- a/app/components/Pay/Pay.js
+++ b/app/components/Pay/Pay.js
@@ -21,7 +21,7 @@ const ShowHidePayReq = Keyframes.Spring({
   big: async (next, cancel, ownProps) => {
     ownProps.context.focusPayReqInput()
     await next({ height: 110, immediate: true })
-  }
+  },
 })
 
 /**
@@ -29,7 +29,7 @@ const ShowHidePayReq = Keyframes.Spring({
  */
 const ShowHideButtons = Keyframes.Spring({
   show: { opacity: 1 },
-  hide: { opacity: 0 }
+  hide: { opacity: 0 },
 })
 
 /**
@@ -42,7 +42,7 @@ const ShowHideAmount = Keyframes.Spring({
     await next({ opacity: 1, height: 'auto' })
   },
   hide: { opacity: 0, height: 0, display: 'none' },
-  remove: { opacity: 0, height: 0, display: 'none', immediate: true }
+  remove: { opacity: 0, height: 0, display: 'none', immediate: true },
 })
 
 /**
@@ -50,50 +50,50 @@ const ShowHideAmount = Keyframes.Spring({
  */
 class Pay extends React.Component {
   static propTypes = {
-    intl: intlShape.isRequired,
-    /** The currently active chain (bitcoin, litecoin etc) */
     chain: PropTypes.string.isRequired,
+    /** The currently active chain (bitcoin, litecoin etc) */
+    changeFilter: PropTypes.func.isRequired,
     /** The currently active chain (mainnet, testnet) */
-    network: PropTypes.string.isRequired,
+    channelBalance: PropTypes.number.isRequired,
     /** Human readable chain name */
-    cryptoName: PropTypes.string.isRequired,
+    closeModal: PropTypes.func.isRequired,
     /** Current channel balance (in satoshis). */
-    channelBalance: PropTypes.number.isRequired,
-    /** Currently selected cryptocurrency (key). */
     cryptoCurrency: PropTypes.string.isRequired,
-    /** Ticker symbol of the currently selected cryptocurrency. */
+    /** Currently selected cryptocurrency (key). */
     cryptoCurrencyTicker: PropTypes.string.isRequired,
+    /** Ticker symbol of the currently selected cryptocurrency. */
+    cryptoName: PropTypes.string.isRequired,
     /** Amount value to populate the amountCrypto field with when the form first loads. */
     initialAmountCrypto: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     /** Amount value to populate the amountFiat field with when the form first loads. */
     initialAmountFiat: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     /** Boolean indicating wether the form is being processed. If true, form buttons are disabled. */
-    isProcessing: PropTypes.bool,
+    intl: intlShape.isRequired,
     /** Current fee information as provided by bitcoinfees.earn.com */
+    isProcessing: PropTypes.bool,
+    /** Payment request to load into the form. */
+    network: PropTypes.string.isRequired,
+    /** Routing information */
     onchainFees: PropTypes.shape({
       fastestFee: PropTypes.number,
       halfHourFee: PropTypes.number,
-      hourFee: PropTypes.number
+      hourFee: PropTypes.number,
     }),
-    /** Payment request to load into the form. */
-    payReq: PropTypes.string,
-    /** Routing information */
-    routes: PropTypes.array,
     /** Current wallet balance (in satoshis). */
-    walletBalance: PropTypes.number.isRequired,
+    payInvoice: PropTypes.func.isRequired,
 
     /** Method to clean activity  filter */
-    changeFilter: PropTypes.func.isRequired,
+    payReq: PropTypes.string,
     /** Method to close the current modal */
-    closeModal: PropTypes.func.isRequired,
+    queryRoutes: PropTypes.func.isRequired,
     /** Method to process offChain invoice payments. Called when the form is submitted. */
-    payInvoice: PropTypes.func.isRequired,
+    routes: PropTypes.array,
     /** Set the current payment request. */
-    setPayReq: PropTypes.func.isRequired,
-    /** Method to process onChain transactions. Called when the form is submitted. */
     sendCoins: PropTypes.func.isRequired,
+    /** Method to process onChain transactions. Called when the form is submitted. */
+    setPayReq: PropTypes.func.isRequired,
     /** Method to collect route information for lightning invoices. */
-    queryRoutes: PropTypes.func.isRequired
+    walletBalance: PropTypes.number.isRequired,
   }
 
   static defaultProps = {
@@ -102,7 +102,7 @@ class Pay extends React.Component {
     initialAmountFiat: null,
     isProcessing: false,
     onchainFees: {},
-    routes: []
+    routes: [],
   }
 
   state = {
@@ -110,7 +110,7 @@ class Pay extends React.Component {
     initialPayReq: null,
     previousStep: null,
     isLn: null,
-    isOnchain: null
+    isOnchain: null,
   }
 
   amountInput = React.createRef()
@@ -202,7 +202,7 @@ class Pay extends React.Component {
       routes,
       sendCoins,
       changeFilter,
-      closeModal
+      closeModal,
     } = this.props
     if (currentStep === 'summary') {
       if (isOnchain) {
@@ -210,7 +210,7 @@ class Pay extends React.Component {
           addr: values.payReq,
           value: values.amountCrypto,
           currency: cryptoCurrency,
-          satPerByte: onchainFees.fastestFee
+          satPerByte: onchainFees.fastestFee,
         })
         // Close the form modal once the transaction has been sent
         changeFilter('ALL_ACTIVITY')
@@ -219,7 +219,7 @@ class Pay extends React.Component {
         payInvoice({
           payReq: values.payReq,
           amt: this.amountInSats(),
-          feeLimit: getMaxFee(routes)
+          feeLimit: getMaxFee(routes),
         })
         // Close the form modal once the payment has been sent
         changeFilter('ALL_ACTIVITY')
@@ -308,7 +308,7 @@ class Pay extends React.Component {
       currentStep: 'address',
       isLn: null,
       isOnchain: null,
-      invoice: null
+      invoice: null,
     }
 
     // See if the user has entered a valid lightning payment request.
@@ -343,12 +343,12 @@ class Pay extends React.Component {
 
     return (
       <Transition
-        native
-        items={currentStep === 'address'}
-        from={{ opacity: 0, height: 0 }}
         enter={{ opacity: 1, height: 80 }}
-        leave={{ opacity: 0, height: 0 }}
+        from={{ opacity: 0, height: 0 }}
         initial={{ opacity: 1, height: 80 }}
+        items={currentStep === 'address'}
+        leave={{ opacity: 0, height: 0 }}
+        native
       >
         {show =>
           show &&
@@ -381,29 +381,29 @@ class Pay extends React.Component {
         : 'request_label_onchain'
 
     return (
-      <Box className={currentStep !== 'summary' ? 'element-show' : 'element-hide'}>
-        <ShowHidePayReq state={currentStep === 'address' || isLn ? 'big' : 'small'} context={this}>
+      <Box className={currentStep === 'summary' ? 'element-hide' : 'element-show'}>
+        <ShowHidePayReq context={this} state={currentStep === 'address' || isLn ? 'big' : 'small'}>
           {styles => (
             <React.Fragment>
               <LightningInvoiceInput
+                chain={chain}
+                css={{
+                  resize: 'vertical',
+                  'min-height': '48px',
+                }}
                 field="payReq"
-                name="payReq"
-                label={intl.formatMessage({ ...messages[payReq_label] })}
-                style={styles}
+                forwardedRef={this.payReqInput}
                 initialValue={payReq}
-                required
-                chain={chain}
+                isReadOnly={currentStep !== 'address'}
+                isRequired
+                label={intl.formatMessage({ ...messages[payReq_label] })}
+                name="payReq"
                 network={network}
+                onChange={this.handlePayReqChange}
+                style={styles}
                 validateOnBlur
                 validateOnChange
-                onChange={this.handlePayReqChange}
                 width={1}
-                readOnly={currentStep !== 'address'}
-                forwardedRef={this.payReqInput}
-                css={{
-                  resize: 'vertical',
-                  'min-height': '48px'
-                }}
               />
             </React.Fragment>
           )}
@@ -418,20 +418,20 @@ class Pay extends React.Component {
 
     return (
       <ShowHideAmount
-        state={currentStep === 'amount' ? 'show' : currentStep === 'address' ? 'hide' : 'remove'}
         context={this}
+        state={currentStep === 'amount' ? 'show' : currentStep === 'address' ? 'hide' : 'remove'}
       >
         {styles => (
           <Box style={styles}>
             <Bar my={3} variant="light" />
 
             <CurrencyFieldGroup
-              disabled={currentStep !== 'amount'}
+              formApi={this.formApi}
               forwardedRef={this.amountInput}
               initialAmountCrypto={initialAmountCrypto}
               initialAmountFiat={initialAmountFiat}
-              formApi={this.formApi}
-              required
+              isDisabled={currentStep !== 'amount'}
+              isRequired
             />
           </Box>
         )}
@@ -455,15 +455,15 @@ class Pay extends React.Component {
       const amount = this.amountInSats()
 
       if (isOnchain) {
-        return <PaySummaryOnChain mt={-3} amount={amount} address={formState.values.payReq} />
+        return <PaySummaryOnChain address={formState.values.payReq} amount={amount} mt={-3} />
       } else if (isLn) {
         return (
           <PaySummaryLightning
-            mt={-3}
-            minFee={minFee}
+            amount={amount}
             maxFee={maxFee}
+            minFee={minFee}
+            mt={-3}
             payReq={formState.values.payReq}
-            amount={amount}
           />
         )
       }
@@ -471,12 +471,12 @@ class Pay extends React.Component {
 
     return (
       <Transition
-        native
-        items={currentStep === 'summary'}
-        from={{ opacity: 0, height: 0 }}
         enter={{ opacity: 1, height: 'auto' }}
-        leave={{ opacity: 0, height: 0 }}
+        from={{ opacity: 0, height: 0 }}
         initial={{ opacity: 1, height: 'auto' }}
+        items={currentStep === 'summary'}
+        leave={{ opacity: 0, height: 0 }}
+        native
       >
         {show => show && (styles => <animated.div style={styles}>{render()}</animated.div>)}
       </Transition>
@@ -512,16 +512,16 @@ class Pay extends React.Component {
     } = this.props
     return (
       <Form
-        width={1}
         css={{ height: '100%' }}
+        width={1}
         {...rest}
         getApi={this.setFormApi}
         onSubmit={this.onSubmit}
       >
         {({ formState }) => {
           // Deterine which buttons should be visible.
-          const showBack = currentStep !== 'address'
-          const showSubmit = currentStep !== 'address' || (isOnchain || isLn)
+          const hasBackButton = currentStep !== 'address'
+          const hasSubmitButton = currentStep !== 'address' || (isOnchain || isLn)
 
           // convert entered amount to satoshis
           let amountInSats = this.amountInSats()
@@ -568,40 +568,40 @@ class Pay extends React.Component {
                 {this.renderSummary()}
               </Panel.Body>
               <Panel.Footer>
-                <ShowHideButtons state={showBack || showSubmit ? 'show' : 'show'}>
+                <ShowHideButtons state={hasBackButton || hasSubmitButton ? 'show' : 'show'}>
                   {styles => (
                     <Box style={styles}>
                       {currentStep === 'summary' && !hasEnoughFunds && (
-                        <Message variant="error" justifyContent="center" mb={2}>
+                        <Message justifyContent="center" mb={2} variant="error">
                           <FormattedMessage {...messages.error_not_enough_funds} />
                         </Message>
                       )}
 
                       <PayButtons
-                        disabled={
+                        hasBackButton={hasBackButton}
+                        hasSubmitButton={hasSubmitButton}
+                        isDisabled={
                           formState.pristine ||
                           formState.invalid ||
                           isProcessing ||
                           (currentStep === 'summary' && !hasEnoughFunds)
                         }
+                        isProcessing={isProcessing}
                         nextButtonText={nextButtonText}
-                        processing={isProcessing}
-                        showBack={showBack}
-                        showSubmit={showSubmit}
                         previousStep={this.previousStep}
                       />
 
                       {walletBalance !== null && (
                         <React.Fragment>
-                          <Text textAlign="center" mt={3} fontWeight="normal">
+                          <Text fontWeight="normal" mt={3} textAlign="center">
                             <FormattedMessage {...messages.current_balance} />:
                           </Text>
-                          <Text textAlign="center" fontSize="xs">
+                          <Text fontSize="xs" textAlign="center">
                             <CryptoValue value={walletBalance} />
                             {` `}
                             {cryptoCurrencyTicker} (onchain),
                           </Text>
-                          <Text textAlign="center" fontSize="xs">
+                          <Text fontSize="xs" textAlign="center">
                             <CryptoValue value={channelBalance} />
                             {` `}
                             {cryptoCurrencyTicker} (in channels)
diff --git a/app/components/Pay/PayButtons.js b/app/components/Pay/PayButtons.js
index f1cf357a19b..6aafc5325cb 100644
--- a/app/components/Pay/PayButtons.js
+++ b/app/components/Pay/PayButtons.js
@@ -11,43 +11,43 @@ import messages from './messages'
  */
 class PayButtons extends React.PureComponent {
   static propTypes = {
-    disabled: PropTypes.bool,
+    hasBackButton: PropTypes.bool,
+    hasSubmitButton: PropTypes.bool,
+    isDisabled: PropTypes.bool,
+    isProcessing: PropTypes.bool,
     nextButtonText: PropTypes.node,
     previousStep: PropTypes.func,
-    processing: PropTypes.bool,
-    showBack: PropTypes.bool,
-    showSubmit: PropTypes.bool
   }
 
   static defaultProps = {
-    disabled: false,
+    isDisabled: false,
     nextButtonText: <FormattedMessage {...messages.next} />,
     previousStep: () => ({}),
-    processing: false,
-    showBack: true,
-    showSubmit: true
+    isProcessing: false,
+    hasBackButton: true,
+    hasSubmitButton: true,
   }
 
   render() {
     const {
-      disabled,
+      isDisabled,
       nextButtonText,
       previousStep,
-      processing,
-      showBack,
-      showSubmit,
+      isProcessing,
+      hasBackButton,
+      hasSubmitButton,
       ...rest
     } = this.props
     return (
-      <Flex {...rest} justifyContent="space-between" alignItems="center">
+      <Flex {...rest} alignItems="center" justifyContent="space-between">
         <Box width={1 / 5}>
-          {showBack && (
+          {hasBackButton && (
             <Button
-              type="button"
-              variant="secondary"
+              isDisabled={isProcessing}
               onClick={previousStep}
               px={0}
-              disabled={processing}
+              type="button"
+              variant="secondary"
             >
               <Flex>
                 <Text>
@@ -60,8 +60,13 @@ class PayButtons extends React.PureComponent {
             </Button>
           )}
         </Box>
-        {showSubmit && (
-          <Button type="submit" mx="auto" disabled={disabled || processing} processing={processing}>
+        {hasSubmitButton && (
+          <Button
+            isDisabled={isDisabled || isProcessing}
+            isProcessing={isProcessing}
+            mx="auto"
+            type="submit"
+          >
             {nextButtonText}
           </Button>
         )}
diff --git a/app/components/Pay/PayHeader.js b/app/components/Pay/PayHeader.js
index bafcfced08b..7396c5b95c1 100644
--- a/app/components/Pay/PayHeader.js
+++ b/app/components/Pay/PayHeader.js
@@ -13,7 +13,7 @@ import messages from './messages'
 class PayHeader extends React.PureComponent {
   static propTypes = {
     title: PropTypes.node.isRequired,
-    type: PropTypes.oneOf(['onchain', 'offchain'])
+    type: PropTypes.oneOf(['onchain', 'offchain']),
   }
 
   render() {
@@ -34,7 +34,7 @@ class PayHeader extends React.PureComponent {
         subtitle = <span>&nbsp;</span>
     }
 
-    return <Header title={title} subtitle={subtitle} logo={logo} />
+    return <Header logo={logo} subtitle={subtitle} title={title} />
   }
 }
 
diff --git a/app/components/Pay/PaySummaryLightning.js b/app/components/Pay/PaySummaryLightning.js
index ac5d08902ec..45b888a7b7f 100644
--- a/app/components/Pay/PaySummaryLightning.js
+++ b/app/components/Pay/PaySummaryLightning.js
@@ -25,14 +25,14 @@ class PaySummaryLightning extends React.Component {
     /** List of nodes as returned by lnd */
     nodes: PropTypes.array,
     /** Lightning Payment request */
-    payReq: PropTypes.string.isRequired
+    payReq: PropTypes.string.isRequired,
   }
 
   static defaultProps = {
     isQueryingRoutes: false,
     minFee: null,
     maxFee: null,
-    nodes: []
+    nodes: [],
   }
 
   render() {
@@ -82,9 +82,9 @@ class PaySummaryLightning extends React.Component {
         <Box py={3}>
           <Flex alignItems="center">
             <Box width={5 / 11}>
-              <Flex flexWrap="wrap" alignItems="baseline">
+              <Flex alignItems="baseline" flexWrap="wrap">
                 <Box>
-                  <Text textAlign="left" fontSize={6}>
+                  <Text fontSize={6} textAlign="left">
                     <CryptoValue value={amountInSatoshis} />
                   </Text>
                 </Box>
@@ -96,13 +96,13 @@ class PaySummaryLightning extends React.Component {
               </Text>
             </Box>
             <Box width={1 / 11}>
-              <Text textAlign="center" color="lightningOrange">
-                <BigArrowRight width="40px" height="28px" />
+              <Text color="lightningOrange" textAlign="center">
+                <BigArrowRight height="28px" width="40px" />
               </Text>
             </Box>
             <Box width={5 / 11}>
-              <Text textAlign="right" className="hint--bottom-left" data-hint={payeeNodeKey}>
-                {<Truncate text={nodeAlias || payeeNodeKey} maxlen={nodeAlias ? 30 : 15} />}
+              <Text className="hint--bottom-left" data-hint={payeeNodeKey} textAlign="right">
+                {<Truncate maxlen={nodeAlias ? 30 : 15} text={nodeAlias || payeeNodeKey} />}
               </Text>
             </Box>
           </Flex>
@@ -114,7 +114,7 @@ class PaySummaryLightning extends React.Component {
           left={<FormattedMessage {...messages.fee} />}
           right={
             isQueryingRoutes ? (
-              <Flex ml="auto" alignItems="center" justifyContent="flex-end">
+              <Flex alignItems="center" justifyContent="flex-end" ml="auto">
                 <Text mr={2}>
                   <FormattedMessage {...messages.searching_routes} />
                   &hellip;
diff --git a/app/components/Pay/PaySummaryOnChain.js b/app/components/Pay/PaySummaryOnChain.js
index ec80fe34b85..524aa64b84f 100644
--- a/app/components/Pay/PaySummaryOnChain.js
+++ b/app/components/Pay/PaySummaryOnChain.js
@@ -12,27 +12,27 @@ import messages from './messages'
 class PaySummaryOnChain extends React.Component {
   static propTypes = {
     /** Amount to send (in satoshis). */
-    amount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-    /** Onchain address of recipient. */
     address: PropTypes.string.isRequired,
+    /** Onchain address of recipient. */
+    amount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
     /** Ticker symbol of the currently selected cryptocurrency. */
     cryptoCurrencyTicker: PropTypes.string.isRequired,
     /** Current fee information as provided by bitcoinfees.earn.com */
+    isQueryingFees: PropTypes.bool,
+    /** Boolean indicating wether routing information is currently being fetched. */
     onchainFees: PropTypes.shape({
       fastestFee: PropTypes.number,
       halfHourFee: PropTypes.number,
-      hourFee: PropTypes.number
+      hourFee: PropTypes.number,
     }),
-    /** Boolean indicating wether routing information is currently being fetched. */
-    isQueryingFees: PropTypes.bool,
 
     /** Method to fetch fee information for onchain transactions. */
-    queryFees: PropTypes.func.isRequired
+    queryFees: PropTypes.func.isRequired,
   }
 
   static defaultProps = {
     isQueryingFees: false,
-    onchainFees: {}
+    onchainFees: {},
   }
 
   componentDidMount() {
@@ -56,9 +56,9 @@ class PaySummaryOnChain extends React.Component {
         <Box py={3}>
           <Flex alignItems="center">
             <Box width={5 / 11}>
-              <Flex flexWrap="wrap" alignItems="baseline">
+              <Flex alignItems="baseline" flexWrap="wrap">
                 <Box>
-                  <Text textAlign="left" fontSize={6}>
+                  <Text fontSize={6} textAlign="left">
                     <CryptoValue value={amount} />
                   </Text>
                 </Box>
@@ -70,12 +70,12 @@ class PaySummaryOnChain extends React.Component {
               </Text>
             </Box>
             <Box width={1 / 11}>
-              <Text textAlign="center" color="lightningOrange">
-                <BigArrowRight width="40px" height="28px" />
+              <Text color="lightningOrange" textAlign="center">
+                <BigArrowRight height="28px" width="40px" />
               </Text>
             </Box>
             <Box width={5 / 11}>
-              <Text textAlign="right" className="hint--bottom-left" data-hint={address}>
+              <Text className="hint--bottom-left" data-hint={address} textAlign="right">
                 <Truncate text={address} />
               </Text>
             </Box>
@@ -88,16 +88,14 @@ class PaySummaryOnChain extends React.Component {
           left={<FormattedMessage {...messages.fee} />}
           right={
             isQueryingFees ? (
-              <Flex ml="auto" alignItems="center" justifyContent="flex-end">
+              <Flex alignItems="center" justifyContent="flex-end" ml="auto">
                 <Text mr={2}>
                   <FormattedMessage {...messages.calculating} />
                   &hellip;
                 </Text>
                 <Spinner color="lightningOrange" />
               </Flex>
-            ) : !fee ? (
-              <FormattedMessage {...messages.fee_unknown} />
-            ) : (
+            ) : fee ? (
               <React.Fragment>
                 <Text>
                   {fee} satoshis <FormattedMessage {...messages.fee_per_byte} />
@@ -106,6 +104,8 @@ class PaySummaryOnChain extends React.Component {
                   (<FormattedMessage {...messages.next_block_confirmation} />)
                 </Text>
               </React.Fragment>
+            ) : (
+              <FormattedMessage {...messages.fee_unknown} />
             )
           }
         />
diff --git a/app/components/Pay/messages.js b/app/components/Pay/messages.js
index cc84254b798..89bab0b509a 100644
--- a/app/components/Pay/messages.js
+++ b/app/components/Pay/messages.js
@@ -25,5 +25,5 @@ export default defineMessages({
   total: 'Total',
   memo: 'Memo',
   description:
-    'You can send {chain} ({ticker}) through the Lightning Network or make a On-Chain Transaction. Just paste your Lightning Payment Request or the {chain} Address in the field below. Zap will guide you to the process.'
+    'You can send {chain} ({ticker}) through the Lightning Network or make a On-Chain Transaction. Just paste your Lightning Payment Request or the {chain} Address in the field below. Zap will guide you to the process.',
 })
diff --git a/app/components/Request/Request.js b/app/components/Request/Request.js
index fb2f6ebc378..b2bfe3456d2 100644
--- a/app/components/Request/Request.js
+++ b/app/components/Request/Request.js
@@ -13,32 +13,32 @@ import messages from './messages'
  */
 class Request extends React.Component {
   state = {
-    currentStep: 'form'
+    currentStep: 'form',
   }
 
   static propTypes = {
     /** Currently selected cryptocurrency (key). */
-    cryptoCurrency: PropTypes.string.isRequired,
+    createInvoice: PropTypes.func.isRequired,
     /** Human readable chain name */
-    cryptoName: PropTypes.string.isRequired,
+    cryptoCurrency: PropTypes.string.isRequired,
     /** Ticker symbol of the currently selected cryptocurrency. */
     cryptoCurrencyTicker: PropTypes.string.isRequired,
     /** Boolean indicating wether the form is being processed. If true, form buttons are disabled. */
-    isProcessing: PropTypes.bool,
+    cryptoName: PropTypes.string.isRequired,
     /** Lnd invoice object for the payment request */
-    invoice: PropTypes.object,
+    intl: intlShape.isRequired,
     /** Lightning Payment request. */
-    payReq: PropTypes.string,
+    invoice: PropTypes.object,
     /** Show a notification */
-    showNotification: PropTypes.func.isRequired,
+    isProcessing: PropTypes.bool,
     /** Create an invoice using the supplied details */
-    createInvoice: PropTypes.func.isRequired,
-    intl: intlShape.isRequired
+    payReq: PropTypes.string,
+    showNotification: PropTypes.func.isRequired,
   }
 
   static defaultProps = {
     isProcessing: false,
-    payReq: null
+    payReq: null,
   }
 
   amountInput = React.createRef()
@@ -125,7 +125,12 @@ class Request extends React.Component {
 
   renderAmountFields = () => {
     return (
-      <CurrencyFieldGroup forwardedRef={this.amountInput} formApi={this.formApi} required mb={3} />
+      <CurrencyFieldGroup
+        formApi={this.formApi}
+        forwardedRef={this.amountInput}
+        isRequired
+        mb={3}
+      />
     )
   }
 
@@ -133,16 +138,16 @@ class Request extends React.Component {
     const { intl } = this.props
     return (
       <TextArea
+        css={{ resize: 'vertical', 'min-height': '48px' }}
         field="memo"
-        name="memo"
-        validateOnBlur
-        validateOnChange
         label={intl.formatMessage({ ...messages.memo })}
+        name="memo"
         placeholder={intl.formatMessage({ ...messages.memo_placeholder })}
+        rows={3}
         tooltip={intl.formatMessage({ ...messages.memo_tooltip })}
+        validateOnBlur
+        validateOnChange
         width={1}
-        rows={3}
-        css={{ resize: 'vertical', 'min-height': '48px' }}
       />
     )
   }
@@ -166,8 +171,8 @@ class Request extends React.Component {
     const { currentStep } = this.state
     return (
       <Form
-        width={1}
         css={{ height: '100%' }}
+        width={1}
         {...rest}
         getApi={this.setFormApi}
         onSubmit={this.onSubmit}
@@ -177,7 +182,7 @@ class Request extends React.Component {
           let nextButtonText = intl.formatMessage({ ...messages.button_text })
           if (formState.values.amountCrypto) {
             nextButtonText = `${intl.formatMessage({
-              ...messages.button_text
+              ...messages.button_text,
             })} ${formState.values.amountCrypto} ${cryptoCurrencyTicker}`
           }
 
@@ -185,11 +190,11 @@ class Request extends React.Component {
             <Panel>
               <Panel.Header>
                 <Header
+                  logo={<Lightning height="45px" width="45px" />}
+                  subtitle={<FormattedMessage {...messages.subtitle} />}
                   title={`${intl.formatMessage({
-                    ...messages.title
+                    ...messages.title,
                   })} ${cryptoName} (${cryptoCurrencyTicker})`}
-                  subtitle={<FormattedMessage {...messages.subtitle} />}
-                  logo={<Lightning height="45px" width="45px" />}
                 />
                 <Bar mt={2} />
               </Panel.Header>
@@ -202,8 +207,8 @@ class Request extends React.Component {
                   </React.Fragment>
                 ) : (
                   <RequestSummary
-                    mt={-3}
                     invoice={invoice}
+                    mt={-3}
                     payReq={payReq}
                     showNotification={showNotification}
                   />
@@ -213,10 +218,10 @@ class Request extends React.Component {
                 <Panel.Footer>
                   <Text textAlign="center">
                     <Button
-                      type="submit"
-                      disabled={formState.pristine || formState.invalid || isProcessing}
-                      processing={isProcessing}
+                      isDisabled={formState.pristine || formState.invalid || isProcessing}
+                      isProcessing={isProcessing}
                       mx="auto"
+                      type="submit"
                     >
                       {nextButtonText}
                     </Button>
diff --git a/app/components/Request/RequestSummary.js b/app/components/Request/RequestSummary.js
index 817e81ac1cb..2aed6c98a68 100644
--- a/app/components/Request/RequestSummary.js
+++ b/app/components/Request/RequestSummary.js
@@ -6,7 +6,7 @@ import {
   FormattedRelative,
   FormattedTime,
   intlShape,
-  injectIntl
+  injectIntl,
 } from 'react-intl'
 import { decodePayReq } from 'lib/utils/crypto'
 import copy from 'copy-to-clipboard'
@@ -18,7 +18,7 @@ import messages from './messages'
 class RequestSummary extends React.Component {
   state = {
     isExpired: null,
-    timer: null
+    timer: null,
   }
 
   static propTypes = {
@@ -28,7 +28,7 @@ class RequestSummary extends React.Component {
     /** Lightning Payment request. */
     payReq: PropTypes.string.isRequired,
     /** Show a notification. */
-    showNotification: PropTypes.func.isRequired
+    showNotification: PropTypes.func.isRequired,
   }
 
   componentDidMount() {
@@ -85,7 +85,7 @@ class RequestSummary extends React.Component {
           right={
             <Flex alignItems="center">
               <CryptoSelector mr={2} />
-              <CryptoValue value={satoshis} fontSize="xxl" />
+              <CryptoValue fontSize="xxl" value={satoshis} />
             </Flex>
           }
         />
@@ -116,16 +116,16 @@ class RequestSummary extends React.Component {
             <React.Fragment>
               <FormattedMessage {...messages.payment_request} />
               <Text
+                className="hint--bottom-left"
+                css={{ 'word-wrap': 'break-word' }}
+                data-hint={payReq}
                 fontSize="xs"
                 fontWeight="light"
                 mb={2}
-                css={{ 'word-wrap': 'break-word' }}
-                className="hint--bottom-left"
-                data-hint={payReq}
               >
-                <Truncate text={payReq} maxlen={40} />
+                <Truncate maxlen={40} text={payReq} />
               </Text>
-              <Button type="button" size="small" onClick={() => copyToClipboard(payReq)}>
+              <Button onClick={() => copyToClipboard(payReq)} size="small" type="button">
                 <FormattedMessage {...messages.copy_button_text} />
               </Button>
             </React.Fragment>
@@ -152,8 +152,8 @@ class RequestSummary extends React.Component {
               <Text color="superRed" fontWeight="normal">
                 {isExpired ? 'Expired ' : 'Expires '}
                 <FormattedRelative
-                  value={decodedInvoice.timeExpireDateString}
                   updateInterval={1000}
+                  value={decodedInvoice.timeExpireDateString}
                 />
                 <br />
                 <FormattedMessage {...messages.not_paid} />
diff --git a/app/components/Request/messages.js b/app/components/Request/messages.js
index 88de153bdbf..e71c481048c 100644
--- a/app/components/Request/messages.js
+++ b/app/components/Request/messages.js
@@ -21,5 +21,5 @@ export default defineMessages({
   title: 'Request',
   subtitle: 'through the Lightning Network',
   description:
-    'You can request {chain} ({ticker}) through the Lightning Network. Just enter the Amount you want to request in the field below. Zap will generate a QR-Code and a Lightning invoice after.'
+    'You can request {chain} ({ticker}) through the Lightning Network. Just enter the Amount you want to request in the field below. Zap will generate a QR-Code and a Lightning invoice after.',
 })
diff --git a/app/components/Settings/Fiat/Fiat.js b/app/components/Settings/Fiat/Fiat.js
index 7b17aa443e1..ec5a82aed51 100644
--- a/app/components/Settings/Fiat/Fiat.js
+++ b/app/components/Settings/Fiat/Fiat.js
@@ -8,17 +8,17 @@ const Fiat = ({ fiatTicker, fiatTickers, disableSubMenu, setFiatTicker }) => (
   <MenuContainer>
     <Menu justify="right">
       <MenuItem
-        item={{ key: 'fiat', name: <FormattedMessage {...messages.title} /> }}
-        onClick={disableSubMenu}
         bg="primaryColor"
         hasParent
+        item={{ key: 'fiat', name: <FormattedMessage {...messages.title} /> }}
+        onClick={disableSubMenu}
       />
       {fiatTickers.map(ft => (
         <MenuItem
           key={ft}
+          active={fiatTicker === ft}
           item={{ key: ft, name: ft }}
           onClick={() => setFiatTicker(ft)}
-          active={fiatTicker === ft}
         />
       ))}
     </Menu>
@@ -26,10 +26,10 @@ const Fiat = ({ fiatTicker, fiatTickers, disableSubMenu, setFiatTicker }) => (
 )
 
 Fiat.propTypes = {
+  disableSubMenu: PropTypes.func.isRequired,
   fiatTicker: PropTypes.string.isRequired,
   fiatTickers: PropTypes.array.isRequired,
-  disableSubMenu: PropTypes.func.isRequired,
-  setFiatTicker: PropTypes.func.isRequired
+  setFiatTicker: PropTypes.func.isRequired,
 }
 
 export default Fiat
diff --git a/app/components/Settings/Fiat/messages.js b/app/components/Settings/Fiat/messages.js
index 0974423964f..596d658b855 100644
--- a/app/components/Settings/Fiat/messages.js
+++ b/app/components/Settings/Fiat/messages.js
@@ -2,5 +2,5 @@ import { defineMessages } from 'react-intl'
 
 /* eslint-disable max-len */
 export default defineMessages({
-  title: 'Fiat Currency'
+  title: 'Fiat Currency',
 })
diff --git a/app/components/Settings/Locale/Locale.js b/app/components/Settings/Locale/Locale.js
index bd8dc149d50..c369ab3d2d4 100644
--- a/app/components/Settings/Locale/Locale.js
+++ b/app/components/Settings/Locale/Locale.js
@@ -14,17 +14,17 @@ const Translate = ({ locales, disableSubMenu, currentLocale, setLocale }) => {
     <MenuContainer>
       <Menu justify="right">
         <MenuItem
-          item={{ key: 'fiat', name: <FormattedMessage {...messages.title} /> }}
-          onClick={disableSubMenu}
           bg="primaryColor"
           hasParent
+          item={{ key: 'fiat', name: <FormattedMessage {...messages.title} /> }}
+          onClick={disableSubMenu}
         />
         {Object.keys(locales).map(lang => (
           <MenuItem
             key={lang}
+            active={currentLocale === lang}
             item={{ key: lang, name: getLanguageName(lang) }}
             onClick={() => changeLocale(lang)}
-            active={currentLocale === lang}
           />
         ))}
       </Menu>
@@ -33,10 +33,10 @@ const Translate = ({ locales, disableSubMenu, currentLocale, setLocale }) => {
 }
 
 Translate.propTypes = {
-  locales: PropTypes.object.isRequired,
   currentLocale: PropTypes.string.isRequired,
+  disableSubMenu: PropTypes.func.isRequired,
+  locales: PropTypes.object.isRequired,
   setLocale: PropTypes.func.isRequired,
-  disableSubMenu: PropTypes.func.isRequired
 }
 
 export default Translate
diff --git a/app/components/Settings/Locale/messages.js b/app/components/Settings/Locale/messages.js
index a1bc3016cdf..63172473b6c 100644
--- a/app/components/Settings/Locale/messages.js
+++ b/app/components/Settings/Locale/messages.js
@@ -2,5 +2,5 @@ import { defineMessages } from 'react-intl'
 
 /* eslint-disable max-len */
 export default defineMessages({
-  title: 'Language'
+  title: 'Language',
 })
diff --git a/app/components/Settings/Menu/Menu.js b/app/components/Settings/Menu/Menu.js
index fbfb81387c4..f73b191dbb3 100644
--- a/app/components/Settings/Menu/Menu.js
+++ b/app/components/Settings/Menu/Menu.js
@@ -9,21 +9,21 @@ const SettingsMenu = ({ history, setActiveSubMenu, openModal }) => (
   <MenuContainer>
     <Menu justify="right">
       <MenuItem
+        hasChildren
         item={{ key: 'fiat', name: <FormattedMessage {...messages.fiat} /> }}
         onClick={() => setActiveSubMenu('fiat')}
-        hasChildren
       />
 
       <MenuItem
+        hasChildren
         item={{ key: 'locale', name: <FormattedMessage {...messages.locale} /> }}
         onClick={() => setActiveSubMenu('locale')}
-        hasChildren
       />
 
       <MenuItem
+        hasChildren
         item={{ key: 'theme', name: <FormattedMessage {...messages.theme} /> }}
         onClick={() => setActiveSubMenu('theme')}
-        hasChildren
       />
 
       <MenuItem
@@ -40,9 +40,9 @@ const SettingsMenu = ({ history, setActiveSubMenu, openModal }) => (
 )
 
 SettingsMenu.propTypes = {
-  setActiveSubMenu: PropTypes.func.isRequired,
+  history: PropTypes.object.isRequired,
   openModal: PropTypes.func.isRequired,
-  history: PropTypes.object.isRequired
+  setActiveSubMenu: PropTypes.func.isRequired,
 }
 
 export default withRouter(SettingsMenu)
diff --git a/app/components/Settings/Menu/messages.js b/app/components/Settings/Menu/messages.js
index c3e0b57e707..e8f58757ac9 100644
--- a/app/components/Settings/Menu/messages.js
+++ b/app/components/Settings/Menu/messages.js
@@ -6,5 +6,5 @@ export default defineMessages({
   locale: 'Language',
   theme: 'Theme',
   channels: 'Manage Channels',
-  logout: 'Logout'
+  logout: 'Logout',
 })
diff --git a/app/components/Settings/Settings.js b/app/components/Settings/Settings.js
index 716194e1f7b..0724cf0fe87 100644
--- a/app/components/Settings/Settings.js
+++ b/app/components/Settings/Settings.js
@@ -56,7 +56,7 @@ class Settings extends React.Component {
       localeProps,
       themeProps,
       setActiveSubMenu,
-      openModal
+      openModal,
     } = this.props
     switch (activeSubMenu) {
       case 'fiat':
@@ -66,7 +66,7 @@ class Settings extends React.Component {
       case 'theme':
         return <Theme {...themeProps} />
       default:
-        return <Menu setActiveSubMenu={setActiveSubMenu} openModal={openModal} />
+        return <Menu openModal={openModal} setActiveSubMenu={setActiveSubMenu} />
     }
   }
 
@@ -81,9 +81,9 @@ class Settings extends React.Component {
           css={{ cursor: 'pointer' }}
           onClick={this.handleButtonClick}
         >
-          <StatusIndicator variant="online" mr={2} />
+          <StatusIndicator mr={2} variant="online" />
           <Flex alignItems="center">
-            <Text textAlign="left" mr={1}>
+            <Text mr={1} textAlign="left">
               <WalletName wallet={activeWalletSettings} />
             </Text>
             {isSettingsOpen ? <AngleUp width="0.6em" /> : <AngleDown width="0.6em" />}
@@ -96,16 +96,16 @@ class Settings extends React.Component {
 }
 
 Settings.propTypes = {
-  isSettingsOpen: PropTypes.bool,
   activeSubMenu: PropTypes.string,
   activeWalletSettings: PropTypes.object,
+  closeSettings: PropTypes.func.isRequired,
   fiatProps: PropTypes.object.isRequired,
+  isSettingsOpen: PropTypes.bool,
   localeProps: PropTypes.object.isRequired,
-  themeProps: PropTypes.object.isRequired,
-  setActiveSubMenu: PropTypes.func.isRequired,
   openModal: PropTypes.func.isRequired,
   openSettings: PropTypes.func.isRequired,
-  closeSettings: PropTypes.func.isRequired
+  setActiveSubMenu: PropTypes.func.isRequired,
+  themeProps: PropTypes.object.isRequired,
 }
 
 export default Settings
diff --git a/app/components/Settings/Theme/Theme.js b/app/components/Settings/Theme/Theme.js
index d5ebe5c564e..d578feca22f 100644
--- a/app/components/Settings/Theme/Theme.js
+++ b/app/components/Settings/Theme/Theme.js
@@ -8,17 +8,17 @@ const Theme = ({ currentTheme, disableSubMenu, setTheme, themes }) => (
   <MenuContainer>
     <Menu justify="right">
       <MenuItem
-        item={{ key: 'fiat', name: <FormattedMessage {...messages.title} /> }}
-        onClick={disableSubMenu}
         bg="primaryColor"
         hasParent
+        item={{ key: 'fiat', name: <FormattedMessage {...messages.title} /> }}
+        onClick={disableSubMenu}
       />
       {Object.keys(themes).map(theme => (
         <MenuItem
           key={theme}
+          active={currentTheme === theme}
           item={{ key: theme, name: <FormattedMessage {...messages[theme]} /> }}
           onClick={() => setTheme(theme)}
-          active={currentTheme === theme}
         />
       ))}
     </Menu>
@@ -29,7 +29,7 @@ Theme.propTypes = {
   currentTheme: PropTypes.string.isRequired,
   disableSubMenu: PropTypes.func.isRequired,
   setTheme: PropTypes.func.isRequired,
-  themes: PropTypes.object.isRequired
+  themes: PropTypes.object.isRequired,
 }
 
 export default Theme
diff --git a/app/components/Settings/Theme/messages.js b/app/components/Settings/Theme/messages.js
index e736cf92f13..e6d886a758a 100644
--- a/app/components/Settings/Theme/messages.js
+++ b/app/components/Settings/Theme/messages.js
@@ -4,5 +4,5 @@ import { defineMessages } from 'react-intl'
 export default defineMessages({
   title: 'Theme',
   dark: 'Dark',
-  light: 'Light'
+  light: 'Light',
 })
diff --git a/app/components/Syncing/Syncing.js b/app/components/Syncing/Syncing.js
index f42fb2e88a3..c3c3dffa40f 100644
--- a/app/components/Syncing/Syncing.js
+++ b/app/components/Syncing/Syncing.js
@@ -9,23 +9,23 @@ import messages from './messages'
 
 class Syncing extends Component {
   static propTypes = {
-    intl: intlShape.isRequired,
     address: PropTypes.string.isRequired,
-    hasSynced: PropTypes.bool,
-    syncStatus: PropTypes.string.isRequired,
-    syncPercentage: PropTypes.number,
     blockHeight: PropTypes.number,
-    setIsWalletOpen: PropTypes.func.isRequired,
-    showNotification: PropTypes.func.isRequired,
+    hasSynced: PropTypes.bool,
+    intl: intlShape.isRequired,
+    isLightningGrpcActive: PropTypes.bool,
     lndBlockHeight: PropTypes.number,
     lndCfilterHeight: PropTypes.number,
-    lightningGrpcActive: PropTypes.bool
+    setIsWalletOpen: PropTypes.func.isRequired,
+    showNotification: PropTypes.func.isRequired,
+    syncPercentage: PropTypes.number,
+    syncStatus: PropTypes.string.isRequired,
   }
 
   state = {
     timer: null,
     syncMessageDetail: null,
-    syncMessageExtraDetail: null
+    syncMessageExtraDetail: null,
   }
 
   componentDidMount() {
@@ -59,7 +59,7 @@ class Syncing extends Component {
       if (syncStatus === 'waiting') {
         this.setState({
           syncMessageDetail: intl.formatMessage({ ...messages.taking_time }),
-          syncMessageExtraDetail: intl.formatMessage({ ...messages.grab_coffee })
+          syncMessageExtraDetail: intl.formatMessage({ ...messages.grab_coffee }),
         })
       }
     }, 5000)
@@ -72,7 +72,7 @@ class Syncing extends Component {
     clearInterval(timer)
     this.setState({
       syncMessageDetail: null,
-      syncMessageExtraDetail: null
+      syncMessageExtraDetail: null,
     })
   }
 
@@ -85,9 +85,9 @@ class Syncing extends Component {
       blockHeight,
       lndBlockHeight,
       lndCfilterHeight,
-      lightningGrpcActive,
+      isLightningGrpcActive,
       intl,
-      showNotification
+      showNotification,
     } = this.props
     let { syncMessageDetail, syncMessageExtraDetail } = this.state
 
@@ -97,7 +97,7 @@ class Syncing extends Component {
       showNotification(notifBody)
     }
 
-    if (lightningGrpcActive && syncStatus === 'complete') {
+    if (isLightningGrpcActive && syncStatus === 'complete') {
       return <Redirect to="/app" />
     }
 
@@ -115,14 +115,14 @@ class Syncing extends Component {
           { ...messages.block_progress },
           {
             currentBlock: lndBlockHeight.toLocaleString(),
-            totalBlocks: blockHeight.toLocaleString()
+            totalBlocks: blockHeight.toLocaleString(),
           }
         )
         syncMessageExtraDetail = intl.formatMessage(
           { ...messages.filter_progress },
           {
             currentFilter: lndCfilterHeight.toLocaleString(),
-            totalFilters: blockHeight.toLocaleString()
+            totalFilters: blockHeight.toLocaleString(),
           }
         )
       }
@@ -130,32 +130,32 @@ class Syncing extends Component {
 
     return (
       <Panel width={1}>
-        <Panel.Header width={9 / 16} mx="auto">
+        <Panel.Header mx="auto" width={9 / 16}>
           {hasSynced ? (
             <Header
-              title={<FormattedMessage {...messages.sync_title} />}
               subtitle={<FormattedMessage {...messages.sync_description} />}
+              title={<FormattedMessage {...messages.sync_title} />}
             />
           ) : (
             <Header
-              title={<FormattedMessage {...messages.fund_title} />}
               subtitle={<FormattedMessage {...messages.fund_description} />}
+              title={<FormattedMessage {...messages.fund_title} />}
             />
           )}
           <Bar my={3} />
         </Panel.Header>
 
-        <Panel.Body width={9 / 16} mx="auto" mb={3}>
+        <Panel.Body mb={3} mx="auto" width={9 / 16}>
           {!hasSynced && address && address.length && (
             <Flex
               alignItems="center"
+              css={{ height: '100%' }}
               flexDirection="column"
               justifyContent="center"
-              css={{ height: '100%' }}
             >
-              <QRCode value={address} mx="auto" size="small" />
+              <QRCode mx="auto" size="small" value={address} />
               <Text my={3}>{address}</Text>
-              <Button size="small" onClick={() => copyToClipboard(address)} mx="auto">
+              <Button mx="auto" onClick={() => copyToClipboard(address)} size="small">
                 <FormattedMessage {...messages.copy_address} />
               </Button>
             </Flex>
@@ -163,37 +163,37 @@ class Syncing extends Component {
           {hasSynced && (
             <Flex
               alignItems="center"
+              css={{ height: '100%' }}
               flexDirection="column"
               justifyContent="center"
-              css={{ height: '100%' }}
             >
               <Text my={3}>
                 <FormattedMessage {...messages.tutorials_list_description} />
               </Text>
-              <Button size="small" onClick={() => window.Zap.openHelpPage()} mx="auto">
+              <Button mx="auto" onClick={() => window.Zap.openHelpPage()} size="small">
                 <FormattedMessage {...messages.tutorials_button_text} />
               </Button>
             </Flex>
           )}
         </Panel.Body>
 
-        <Panel.Footer bg="secondaryColor" p={3} css={{ 'min-height': '160px' }}>
+        <Panel.Footer bg="secondaryColor" css={{ 'min-height': '160px' }} p={3}>
           <Flex
             alignItems="center"
             flexDirection="column"
             justifyContent="center"
-            width={9 / 16}
             mx="auto"
+            width={9 / 16}
           >
             <Text fontWeight="normal" mb={3}>
               <FormattedMessage {...messages.sync_caption} />
             </Text>
             <Heading.h1 mb={2}>{syncMessage}</Heading.h1>
-            <Box width={1} css={{ height: '4px' }} bg="grey" mb={2}>
+            <Box bg="grey" css={{ height: '4px' }} mb={2} width={1}>
               <Box
-                width={syncPercentage ? `${syncPercentage}%` : 0}
-                css={{ height: '100%' }}
                 bg="lightningOrange"
+                css={{ height: '100%' }}
+                width={syncPercentage ? `${syncPercentage}%` : 0}
               />
             </Box>
 
diff --git a/app/components/Syncing/messages.js b/app/components/Syncing/messages.js
index c9bb5b09c3a..e77ba191ac1 100644
--- a/app/components/Syncing/messages.js
+++ b/app/components/Syncing/messages.js
@@ -18,5 +18,5 @@ export default defineMessages({
   tutorials_button_text: 'Zap Tutorials',
   copy_address: 'Copy address',
   address_copied_notification_title: 'Address copied',
-  address_copied_notification_description: 'Payment address has been copied to your clipboard'
+  address_copied_notification_description: 'Payment address has been copied to your clipboard',
 })
diff --git a/app/components/TabControl/PersistentTabControl.js b/app/components/TabControl/PersistentTabControl.js
index 9f30b3874f5..f8af23eb8db 100644
--- a/app/components/TabControl/PersistentTabControl.js
+++ b/app/components/TabControl/PersistentTabControl.js
@@ -15,7 +15,7 @@ const PersistentTabControl = ({ activeTab, children, className }) => (
     {React.Children.map(children, (tab, index) => {
       const isActive = index === activeTab
       return (
-        <Container key={index} isActive={isActive} className={className}>
+        <Container key={index} className={className} isActive={isActive}>
           <Tab isActive={isActive}>{tab}</Tab>
         </Container>
       )
@@ -26,6 +26,6 @@ const PersistentTabControl = ({ activeTab, children, className }) => (
 PersistentTabControl.propTypes = {
   activeTab: PropTypes.number.isRequired,
   children: PropTypes.node.isRequired,
-  className: PropTypes.string
+  className: PropTypes.string,
 }
 export default PersistentTabControl
diff --git a/app/components/TabControl/Tab.js b/app/components/TabControl/Tab.js
index 3c614d547c6..02fcfca76bc 100644
--- a/app/components/TabControl/Tab.js
+++ b/app/components/TabControl/Tab.js
@@ -8,7 +8,7 @@ const Tab = React.memo(({ children }) => <>{children}</>, shouldUpdate)
 Tab.displayName = 'Tab'
 
 Tab.propTypes = {
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
 }
 
 export default Tab
diff --git a/app/components/UI/ActionBar.js b/app/components/UI/ActionBar.js
index c89a1acf23a..d02f234368b 100644
--- a/app/components/UI/ActionBar.js
+++ b/app/components/UI/ActionBar.js
@@ -7,9 +7,9 @@ const createButtons = buttons =>
   buttons.map((entry, index) => (
     <Button
       key={entry.name}
-      variant={index === buttons.length - 1 ? 'normal' : 'secondary'}
       mr={index < buttons.length - 1 ? 6 : 0}
       onClick={entry.onClick}
+      variant={index === buttons.length - 1 ? 'normal' : 'secondary'}
     >
       {entry.name}
     </Button>
@@ -21,12 +21,12 @@ const ActionBar = ({ buttons, ...rest }) => {
 
   return (
     <Flex
+      bg="secondaryColor"
       flexDirection="row"
       justifyContent="flex-end"
-      bg="secondaryColor"
+      pb={2}
       pr={5}
       pt={2}
-      pb={2}
       {...rest}
     >
       {buttonsLayout}
@@ -40,10 +40,10 @@ ActionBar.propTypes = {
     PropTypes.arrayOf(
       PropTypes.shape({
         name: PropTypes.string.isRequired,
-        onClick: PropTypes.func.isRequired
+        onClick: PropTypes.func.isRequired,
       })
-    )
-  ]).isRequired
+    ),
+  ]).isRequired,
 }
 
 export default ActionBar
diff --git a/app/components/UI/BackgroundPrimary.js b/app/components/UI/BackgroundPrimary.js
index 2033c8896e4..7b302b3cb4a 100644
--- a/app/components/UI/BackgroundPrimary.js
+++ b/app/components/UI/BackgroundPrimary.js
@@ -9,7 +9,7 @@ import { Flex } from 'rebass'
  */
 class BackgroundPrimary extends React.Component {
   render() {
-    return <Flex flexDirection="column" bg="primaryColor" color="primaryText" {...this.props} />
+    return <Flex bg="primaryColor" color="primaryText" flexDirection="column" {...this.props} />
   }
 }
 
diff --git a/app/components/UI/Bar.js b/app/components/UI/Bar.js
index ba8ba26ac75..0ac6b3f34e9 100644
--- a/app/components/UI/Bar.js
+++ b/app/components/UI/Bar.js
@@ -2,7 +2,7 @@ import styled from 'styled-components'
 import { variant, space, height } from 'styled-system'
 
 const bars = variant({
-  key: 'bars'
+  key: 'bars',
 })
 
 const Bar = styled.hr`
@@ -17,7 +17,7 @@ const Bar = styled.hr`
 `
 
 Bar.defaultProps = {
-  variant: 'normal'
+  variant: 'normal',
 }
 
 Bar.displayName = 'Bar'
diff --git a/app/components/UI/Button.js b/app/components/UI/Button.js
index 082051d7d79..b2490890127 100644
--- a/app/components/UI/Button.js
+++ b/app/components/UI/Button.js
@@ -26,16 +26,16 @@ Wrapper.displayName = 'Button'
  * <Button><Basic button</Button>
  */
 const Button = React.forwardRef((props, ref) => {
-  let { children, active, processing, size, variant, className, ...rest } = props
+  let { children, isActive, isDisabled, isProcessing, size, variant, className, ...rest } = props
   const sizes = {
     small: {
       x: 3,
-      y: 2
+      y: 2,
     },
     medium: {
       x: 5,
-      y: 3
-    }
+      y: 3,
+    },
   }
 
   size = sizes[size] || sizes['medium']
@@ -46,27 +46,30 @@ const Button = React.forwardRef((props, ref) => {
   const borderRadius = variant === 'secondary' ? 0 : 5
 
   //support custom styled and styled-components
-  const wrapperClasses = [className, active ? 'active' : null].filter(cls => Boolean(cls)).join(' ')
+  const wrapperClasses = [className, isActive ? 'active' : null]
+    .filter(cls => Boolean(cls))
+    .join(' ')
 
   return (
     <Wrapper
+      ref={ref}
+      borderRadius={borderRadius}
+      className={wrapperClasses}
+      disabled={isDisabled}
       px={size['x']}
       py={size['y']}
-      borderRadius={borderRadius}
       variant={variant}
-      className={wrapperClasses}
-      ref={ref}
       {...rest}
     >
-      {processing ? (
+      {isProcessing ? (
         <Flex alignItems="center">
-          {processing && <Spinner />}
-          <Text fontWeight="normal" fontFamily="sans" ml={2}>
+          {isProcessing && <Spinner />}
+          <Text fontFamily="sans" fontWeight="normal" ml={2}>
             {children}
           </Text>
         </Flex>
       ) : (
-        <Text fontWeight="normal" fontFamily="sans">
+        <Text fontFamily="sans" fontWeight="normal">
           {children}
         </Text>
       )}
@@ -77,19 +80,21 @@ const Button = React.forwardRef((props, ref) => {
 Button.displayName = 'Button'
 
 Button.propTypes = {
-  processing: PropTypes.bool,
-  active: PropTypes.bool,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  isActive: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isProcessing: PropTypes.bool,
   size: PropTypes.oneOf(['small', 'medium']),
   variant: PropTypes.string,
-  className: PropTypes.string,
-  children: PropTypes.node
 }
 
 Button.defaultProps = {
-  processing: false,
-  active: false,
+  isProcessing: false,
+  isActive: false,
+  isDisabled: false,
   size: 'medium',
-  variant: 'normal'
+  variant: 'normal',
 }
 
 export default Button
diff --git a/app/components/UI/Card.js b/app/components/UI/Card.js
index 9799690964d..f0ec144029d 100644
--- a/app/components/UI/Card.js
+++ b/app/components/UI/Card.js
@@ -6,10 +6,10 @@ const Card = ({ children, ...rest }) => (
   <BaseCard
     as="section"
     bg="primaryColor"
-    color="primaryText"
-    p={3}
     borderRadius={5}
     boxShadow="0 2px 24px 0 rgba(0, 0, 0, 0.5)"
+    color="primaryText"
+    p={3}
     {...rest}
   >
     {children}
@@ -17,7 +17,7 @@ const Card = ({ children, ...rest }) => (
 )
 
 Card.propTypes = {
-  children: PropTypes.node
+  children: PropTypes.node,
 }
 
 export default Card
diff --git a/app/components/UI/Checkbox.js b/app/components/UI/Checkbox.js
index 316335ede99..4c4b6ed26b1 100644
--- a/app/components/UI/Checkbox.js
+++ b/app/components/UI/Checkbox.js
@@ -8,24 +8,24 @@ import Text from './Text'
 
 const mapOutlineBorderColor = props => {
   const {
-    disabled,
-    checked,
+    isDisabled,
+    isChecked,
     theme: {
-      colors: { gray, lightningOrange }
-    }
+      colors: { gray, lightningOrange },
+    },
   } = props
-  return !checked || disabled ? gray : lightningOrange
+  return !isChecked || isDisabled ? gray : lightningOrange
 }
 
 const mapOutlineBackgroundColor = props => {
   const {
-    disabled,
-    checked,
+    isDisabled,
+    isChecked,
     theme: {
-      colors: { lightningOrange }
-    }
+      colors: { lightningOrange },
+    },
   } = props
-  return !checked || disabled ? 'transparent' : lightningOrange
+  return !isChecked || isDisabled ? 'transparent' : lightningOrange
 }
 
 const CheckboxOutline = styled(Flex)`
@@ -37,16 +37,16 @@ const CheckboxOutline = styled(Flex)`
 
 function mapContainerBorderColor(props) {
   const {
-    disabled,
+    isDisabled,
     theme: {
-      colors: { gray, lightningOrange }
-    }
+      colors: { gray, lightningOrange },
+    },
   } = props
-  return disabled ? gray : lightningOrange
+  return isDisabled ? gray : lightningOrange
 }
 
 const Container = styled(Flex)`
-  cursor: ${props => (props.disabled ? 'auto' : 'pointer')};
+  cursor: ${props => (props.isDisabled ? 'auto' : 'pointer')};
   user-select: none;
   &:hover ${CheckboxOutline} {
     border-color: ${mapContainerBorderColor};
@@ -68,11 +68,11 @@ const HiddenCheckbox = styled.input.attrs({ type: 'checkbox' })`
   width: 1px;
 `
 
-const Checkmark = ({ checked, disabled }) => {
-  if (disabled) {
+const Checkmark = ({ isChecked, isDisabled }) => {
+  if (isDisabled) {
     return <DisabledCheck />
   }
-  return checked && <Check width={13} height={13} />
+  return isChecked && <Check height={13} width={13} />
 }
 
 const DisabledCheck = styled.div`
@@ -82,24 +82,24 @@ const DisabledCheck = styled.div`
   border-radius: 5px;
 `
 
-const Checkbox = ({ label, description, checked, disabled, onChange, ...rest }) => (
-  <Container onClick={onChange} {...rest} disabled={disabled} checked={checked}>
-    <HiddenCheckbox checked={checked} onChange={() => {}} />
+const Checkbox = ({ label, description, isChecked, isDisabled, onChange, ...rest }) => (
+  <Container onClick={onChange} {...rest} isChecked={isChecked} isDisabled={isDisabled}>
+    <HiddenCheckbox checked={isChecked} onChange={() => {}} />
     <CheckboxOutline
-      borderRadius={6}
-      width={18}
-      disabled={disabled}
-      color={disabled ? 'gray' : 'primaryColor'}
-      checked={checked}
       alignItems="center"
+      borderRadius={6}
+      color={isDisabled ? 'gray' : 'primaryColor'}
+      isChecked={isChecked}
+      isDisabled={isDisabled}
       justifyContent="center"
+      width={18}
     >
-      <Checkmark checked={checked} disabled={disabled} />
+      <Checkmark isChecked={isChecked} isDisabled={isDisabled} />
     </CheckboxOutline>
-    <Flex flexDirection="column" alignItems="flex-start" ml={2}>
+    <Flex alignItems="flex-start" flexDirection="column" ml={2}>
       <Text>{label}</Text>
       {description && (
-        <Text mt={2} color="gray">
+        <Text color="gray" mt={2}>
           {description}
         </Text>
       )}
@@ -108,16 +108,16 @@ const Checkbox = ({ label, description, checked, disabled, onChange, ...rest })
 )
 
 Checkbox.defaultProps = {
-  checked: false,
-  disabled: false
+  isChecked: false,
+  isDisabled: false,
 }
 
 Checkbox.propTypes = {
-  label: PropTypes.string.isRequired,
   description: PropTypes.string,
-  checked: PropTypes.bool,
-  disabled: PropTypes.bool,
-  onChange: PropTypes.func.isRequired
+  isChecked: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  label: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
 }
 
 const WrappedCheckboxAsField = ({ fieldState, fieldApi, ...rest }) => {
@@ -129,15 +129,15 @@ const WrappedCheckboxAsField = ({ fieldState, fieldApi, ...rest }) => {
     setValue(!value)
   }
 
-  return <Checkbox checked={value} onChange={onChange} {...rest} />
+  return <Checkbox isChecked={value} onChange={onChange} {...rest} />
 }
 
 WrappedCheckboxAsField.propTypes = {
-  fieldState: PropTypes.object.isRequired,
+  description: PropTypes.node,
   fieldApi: PropTypes.object.isRequired,
+  fieldState: PropTypes.object.isRequired,
+  isDisabled: PropTypes.bool,
   label: PropTypes.string.isRequired,
-  disabled: PropTypes.bool,
-  description: PropTypes.node
 }
 
 export default asField(WrappedCheckboxAsField)
diff --git a/app/components/UI/Countdown.js b/app/components/UI/Countdown.js
index 0d8570f31ac..bb47c04e5f4 100644
--- a/app/components/UI/Countdown.js
+++ b/app/components/UI/Countdown.js
@@ -7,24 +7,24 @@ import messages from './messages'
 class Countdown extends React.Component {
   state = {
     isExpired: null,
-    timer: null
+    timer: null,
   }
 
   static propTypes = {
     colorActive: PropTypes.string,
     colorExpired: PropTypes.string,
-    date: PropTypes.oneOfType([PropTypes.number, PropTypes.instanceOf(Date)]).isRequired,
     countdownStyle: PropTypes.string,
-    countUpAfterExpire: PropTypes.bool,
-    updateInterval: PropTypes.number
+    date: PropTypes.oneOfType([PropTypes.number, PropTypes.instanceOf(Date)]).isRequired,
+    isContinual: PropTypes.bool,
+    updateInterval: PropTypes.number,
   }
 
   static defaultProps = {
     colorActive: 'superGreen',
     colorExpired: 'superRed',
     countdownStyle: 'best fit',
-    countUpAfterExpire: true,
-    updateInterval: 1000
+    isContinual: true,
+    updateInterval: 1000,
   }
 
   componentDidMount() {
@@ -53,7 +53,7 @@ class Countdown extends React.Component {
       colorActive,
       colorExpired,
       countdownStyle,
-      countUpAfterExpire,
+      isContinual,
       date,
       updateInterval,
       ...rest
@@ -66,13 +66,13 @@ class Countdown extends React.Component {
         ) : (
           <FormattedMessage {...messages.expires} />
         )}
-        {(!isExpired || (isExpired && countUpAfterExpire)) && (
+        {(!isExpired || (isExpired && isContinual)) && (
           <React.Fragment>
             {` `}
             <FormattedRelative
-              value={new Date(date)}
-              updateInterval={updateInterval}
               style={countdownStyle}
+              updateInterval={updateInterval}
+              value={new Date(date)}
             />
           </React.Fragment>
         )}
diff --git a/app/components/UI/CryptoAmountInput.js b/app/components/UI/CryptoAmountInput.js
index b9786aed5b1..c7a1d8a52e5 100644
--- a/app/components/UI/CryptoAmountInput.js
+++ b/app/components/UI/CryptoAmountInput.js
@@ -15,12 +15,12 @@ import Input from './Input'
  */
 class CryptoAmountInput extends React.Component {
   static propTypes = {
+    currency: PropTypes.string.isRequired,
     fieldApi: PropTypes.object.isRequired,
     fieldState: PropTypes.object.isRequired,
-    currency: PropTypes.string.isRequired,
-    required: PropTypes.bool,
+    isRequired: PropTypes.bool,
+    onBlur: PropTypes.func,
     onChange: PropTypes.func,
-    onBlur: PropTypes.func
   }
 
   /**
@@ -62,26 +62,26 @@ class CryptoAmountInput extends React.Component {
         return {
           precision: 8,
           placeholder: '0.00000000',
-          pattern: '[0-9]*.?[0-9]{0,8}?'
+          pattern: '[0-9]*.?[0-9]{0,8}?',
         }
       case 'bits':
       case 'phots':
         return {
           precision: 2,
           placeholder: '0.00',
-          pattern: '[0-9]*.?[0-9]{0,2}?'
+          pattern: '[0-9]*.?[0-9]{0,2}?',
         }
       case 'sats':
       case 'lits':
         return {
           precision: 0,
           placeholder: '00000000',
-          pattern: '[0-9]*'
+          pattern: '[0-9]*',
         }
       default:
         return {
           precision: 2,
-          pattern: '[0-9]*'
+          pattern: '[0-9]*',
         }
     }
   }
@@ -90,7 +90,7 @@ class CryptoAmountInput extends React.Component {
     const rules = this.getRules()
 
     return (
-      <Input {...this.props} type="text" placeholder={rules.placeholder} pattern={rules.pattern} />
+      <Input {...this.props} pattern={rules.pattern} placeholder={rules.placeholder} type="text" />
     )
   }
 }
@@ -99,19 +99,19 @@ const CryptoAmountInputAsField = CryptoAmountInput
 
 class WrappedCryptoAmountInputAsField extends React.Component {
   static propTypes = {
-    disabled: PropTypes.bool,
-    required: PropTypes.bool,
-    validate: PropTypes.func
+    isDisabled: PropTypes.bool,
+    isRequired: PropTypes.bool,
+    validate: PropTypes.func,
   }
 
   static defaultProps = {
-    disabled: false,
-    required: false
+    isDisabled: false,
+    isRequired: false,
   }
 
   validate = value => {
-    const { disabled, required } = this.props
-    if (disabled) {
+    const { isDisabled, isRequired } = this.props
+    if (isDisabled) {
       return
     }
     try {
@@ -120,7 +120,7 @@ class WrappedCryptoAmountInputAsField extends React.Component {
         .positive()
         .min(0)
         .typeError('A number is required')
-      if (required) {
+      if (isRequired) {
         validator = validator.required().moreThan(0)
       }
       validator.validateSync(Number(value))
diff --git a/app/components/UI/CurrencyFieldGroup.js b/app/components/UI/CurrencyFieldGroup.js
index 0cbae2ddb30..ef9e2f8cd12 100644
--- a/app/components/UI/CurrencyFieldGroup.js
+++ b/app/components/UI/CurrencyFieldGroup.js
@@ -11,50 +11,50 @@ import messages from './messages'
 class CurrencyFieldGroup extends React.Component {
   static propTypes = {
     /** Current ticker data as provided by blockchain.info */
-    currentTicker: PropTypes.object.isRequired,
-    /** Currently selected cryptocurrency (key). */
-    cryptoCurrency: PropTypes.string.isRequired,
-    /** List of supported cryptocurrencies. */
     cryptoCurrencies: PropTypes.arrayOf(
       PropTypes.shape({
         key: PropTypes.string.isRequired,
-        name: PropTypes.string.isRequired
+        name: PropTypes.string.isRequired,
       })
     ).isRequired,
+    /** Currently selected cryptocurrency (key). */
+    cryptoCurrency: PropTypes.string.isRequired,
+    /** List of supported cryptocurrencies. */
+    currentTicker: PropTypes.object.isRequired,
     /** Boolean indicating if form fields are disabled */
-    disabled: PropTypes.bool,
-    /** List of supported fiat currencies. */
     fiatCurrencies: PropTypes.array.isRequired,
-    /** Currently selected fiat currency (key). */
+    /** List of supported fiat currencies. */
     fiatCurrency: PropTypes.string.isRequired,
-    /** FormApi */
+    /** Currently selected fiat currency (key). */
     formApi: PropTypes.object.isRequired,
-    /** forward ref for amount crypto field */
+    /** FormApi */
     forwardedRef: PropTypes.object,
-    /** Amount value to populate the amountCrypto field with when the form first loads. */
+    /** forward ref for amount crypto field */
     initialAmountCrypto: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    /** Amount value to populate the amountFiat field with when the form first loads. */
+    /** Amount value to populate the amountCrypto field with when the form first loads. */
     initialAmountFiat: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    /** Amount value to populate the amountFiat field with when the form first loads. */
+    isDisabled: PropTypes.bool,
     /** Boolean indicating if form fields are required */
-    required: PropTypes.bool,
+    isRequired: PropTypes.bool,
     /** Additional field validation */
-    validate: PropTypes.func,
+    setCryptoCurrency: PropTypes.func.isRequired,
     /** Boolean indicating if form fields should validate on blur */
-    validateOnBlur: PropTypes.bool,
+    setFiatCurrency: PropTypes.func.isRequired,
     /** Boolean indicating if form fields should validate on change */
-    validateOnChange: PropTypes.bool,
+    validate: PropTypes.func,
     /** Set the current cryptocurrency. */
-    setCryptoCurrency: PropTypes.func.isRequired,
+    validateOnBlur: PropTypes.bool,
     /** Set the current fiat currency */
-    setFiatCurrency: PropTypes.func.isRequired
+    validateOnChange: PropTypes.bool,
   }
 
   static defaultProps = {
-    disabled: false,
+    isDisabled: false,
     initialAmountCrypto: null,
     initialAmountFiat: null,
     validateOnBlur: true,
-    validateOnChange: true
+    validateOnChange: true,
   }
 
   /**
@@ -98,12 +98,12 @@ class CurrencyFieldGroup extends React.Component {
       cryptoCurrency,
       cryptoCurrencies,
       currentTicker,
-      disabled,
+      isDisabled,
       fiatCurrency,
       fiatCurrencies,
       initialAmountCrypto,
       initialAmountFiat,
-      required,
+      isRequired,
       validate,
       validateOnBlur,
       validateOnChange,
@@ -116,53 +116,53 @@ class CurrencyFieldGroup extends React.Component {
           <Flex width={6 / 13}>
             <Box width={150}>
               <CryptoAmountInput
+                currency={cryptoCurrency}
                 field="amountCrypto"
-                name="amountCrypto"
+                forwardedRef={this.forwardedRef}
                 initialValue={initialAmountCrypto}
-                currency={cryptoCurrency}
-                required={required}
+                isDisabled={isDisabled}
+                isRequired={isRequired}
                 label={<FormattedMessage {...messages.amount} />}
-                width={150}
+                name="amountCrypto"
+                onChange={this.handleAmountCryptoChange}
                 validate={validate}
                 validateOnBlur={validateOnBlur}
                 validateOnChange={validateOnChange}
-                onChange={this.handleAmountCryptoChange}
-                forwardedRef={this.forwardedRef}
-                disabled={disabled}
+                width={150}
               />
             </Box>
             <Dropdown
               activeKey={cryptoCurrency}
               items={cryptoCurrencies}
-              onChange={this.handleCryptoCurrencyChange}
-              mt={36}
               ml={2}
+              mt={36}
+              onChange={this.handleCryptoCurrencyChange}
             />
           </Flex>
-          <Flex justifyContent="center" width={1 / 11} mt={38}>
+          <Flex justifyContent="center" mt={38} width={1 / 11}>
             =
           </Flex>
           <Flex width={6 / 13}>
-            <Box width={150} ml="auto">
+            <Box ml="auto" width={150}>
               <FiatAmountInput
-                field="amountFiat"
-                name="amountFiat"
-                initialValue={initialAmountFiat}
                 currency={fiatCurrency}
                 currentTicker={currentTicker}
+                field="amountFiat"
+                initialValue={initialAmountFiat}
+                isDisabled={isDisabled}
                 label="&nbsp;"
-                width={150}
+                name="amountFiat"
                 onChange={this.handleAmountFiatChange}
-                disabled={disabled}
+                width={150}
               />
             </Box>
 
             <Dropdown
               activeKey={fiatCurrency}
               items={fiatCurrencies}
-              onChange={this.handleFiatCurrencyChange}
-              mt={36}
               ml={2}
+              mt={36}
+              onChange={this.handleFiatCurrencyChange}
             />
           </Flex>
         </Flex>
diff --git a/app/components/UI/DataRow.js b/app/components/UI/DataRow.js
index 5dcfbf22ec6..2407689d2f0 100644
--- a/app/components/UI/DataRow.js
+++ b/app/components/UI/DataRow.js
@@ -7,18 +7,18 @@ import Text from './Text'
 
 class DataRow extends React.PureComponent {
   state = {
-    collapsed: true
+    collapsed: true,
   }
 
   static propTypes = {
+    body: PropTypes.any,
     left: PropTypes.any,
     right: PropTypes.any,
-    body: PropTypes.any
   }
 
   toggleBody = () => {
     this.setState(prevState => ({
-      collapsed: !prevState.collapsed
+      collapsed: !prevState.collapsed,
     }))
   }
 
@@ -31,7 +31,7 @@ class DataRow extends React.PureComponent {
         <Flex alignItems="center" justifyContent="space-between">
           {body ? (
             <Flex alignItems="center" css={{ cursor: 'pointer' }} onClick={this.toggleBody}>
-              <Flex width={8} alignItems="center" flexDirection="column" mr={2}>
+              <Flex alignItems="center" flexDirection="column" mr={2} width={8}>
                 {collapsed ? <AngleRight height="8px" /> : <AngleDown width="8px" />}
               </Flex>
 
diff --git a/app/components/UI/Dialog.js b/app/components/UI/Dialog.js
index 4f0a91224c2..bd0f650716d 100644
--- a/app/components/UI/Dialog.js
+++ b/app/components/UI/Dialog.js
@@ -6,7 +6,7 @@ import Button from './Button'
 import Heading from './Heading'
 
 const CloseButton = ({ onClick }) => (
-  <Flex justifyContent="space-between" color="primaryText">
+  <Flex color="primaryText" justifyContent="space-between">
     <Box
       css={{ height: '32px', cursor: 'pointer', opacity: 0.6, '&:hover': { opacity: 1 } }}
       ml="auto"
@@ -14,18 +14,18 @@ const CloseButton = ({ onClick }) => (
       p={2}
       px={10}
     >
-      <X width={15} height={15} />
+      <X height={15} width={15} />
     </Box>
   </Flex>
 )
 
 CloseButton.propTypes = {
-  onClick: PropTypes.func.isRequired
+  onClick: PropTypes.func.isRequired,
 }
 
 const createButtons = buttons =>
   buttons.map((entry, index) => (
-    <Button key={entry.name} variant={index === 0 ? 'primary' : 'normal'} onClick={entry.onClick}>
+    <Button key={entry.name} onClick={entry.onClick} variant={index === 0 ? 'primary' : 'normal'}>
       {entry.name}
     </Button>
   ))
@@ -44,30 +44,30 @@ const Dialog = ({ header, onClose, buttons, width, children }) => {
   return (
     <Card
       bg="primaryColor"
-      width={width}
       borderRadius={5}
       boxShadow="0 3px 4px 0 rgba(0, 0, 0, 0.5)"
+      width={width}
     >
       <CloseButton onClick={onClose} />
       <Flex
-        flexDirection="column"
         alignItems="center"
-        justifyContent="center"
         alignSelf="stretch"
+        flexDirection="column"
+        justifyContent="center"
         pb={4}
       >
-        <Flex flexDirection="column" alignItems="flex-start" justifyContent="center">
+        <Flex alignItems="flex-start" flexDirection="column" justifyContent="center">
           {headerLayout}
           {children}
         </Flex>
 
         <Flex
-          flexDirection="row"
           alignSelf="stretch"
+          flexDirection="row"
           justifyContent="space-evenly"
+          mt={4}
           pl={6}
           pr={6}
-          mt={4}
         >
           {buttonsLayout}
         </Flex>
@@ -77,23 +77,23 @@ const Dialog = ({ header, onClose, buttons, width, children }) => {
 }
 
 Dialog.defaultProps = {
-  width: 550
+  width: 550,
 }
 
 Dialog.propTypes = {
-  header: PropTypes.node.isRequired,
-  children: PropTypes.node,
-  onClose: PropTypes.func.isRequired,
-  width: PropTypes.number,
   buttons: PropTypes.oneOfType([
     PropTypes.node,
     PropTypes.arrayOf(
       PropTypes.shape({
         name: PropTypes.string.isRequired,
-        onClick: PropTypes.func.isRequired
+        onClick: PropTypes.func.isRequired,
       })
-    )
-  ]).isRequired
+    ),
+  ]).isRequired,
+  children: PropTypes.node,
+  header: PropTypes.node.isRequired,
+  onClose: PropTypes.func.isRequired,
+  width: PropTypes.number,
 }
 
 export default Dialog
diff --git a/app/components/UI/Dropdown.js b/app/components/UI/Dropdown.js
index b1e7e43e489..e3a87805458 100644
--- a/app/components/UI/Dropdown.js
+++ b/app/components/UI/Dropdown.js
@@ -17,7 +17,7 @@ const DropdownContainer = styled(Flex)({})
 DropdownContainer.defaultProps = {
   flexDirection: 'column',
   flexWrap: 'none',
-  position: 'relative'
+  position: 'relative',
 }
 
 /**
@@ -34,14 +34,14 @@ const DropdownButton = styled(ButtonBox)({
   outline: 'none',
   background: 'transparent',
   color: 'inherit',
-  cursor: 'pointer'
+  cursor: 'pointer',
 })
 DropdownButton.defaultProps = {
   as: 'button',
   m: 0,
   p: 0,
   textAlign: 'left',
-  justify: 'left'
+  justify: 'left',
 }
 
 /**
@@ -70,7 +70,7 @@ Menu.defaultProps = {
   m: 0,
   mt: 1,
   p: 0,
-  bg: 'secondaryColor'
+  bg: 'secondaryColor',
 }
 
 /**
@@ -79,34 +79,34 @@ Menu.defaultProps = {
 export const MenuItem = withTheme(
   ({ item, onClick, active, theme, hasParent, hasChildren, ...rest }) => (
     <Text
+      key={item.key}
       as="li"
-      px={2}
-      py={2}
       css={{
         cursor: 'pointer',
         'white-space': 'nowrap',
         '&:hover': {
-          'background-color': theme.colors.primaryColor
-        }
+          'background-color': theme.colors.primaryColor,
+        },
       }}
-      key={item.key}
       onClick={() => onClick(item.key)}
+      px={2}
+      py={2}
       {...rest}
     >
       <Flex alignItems="center" pr={2}>
         {hasParent && (
-          <Flex alignItems="center" width="20px" color="gray">
+          <Flex alignItems="center" color="gray" width="20px">
             <AngleLeft height="8px" />
           </Flex>
         )}
         {!hasParent && (
-          <Text width="20px" textAlign="center" color="superGreen">
+          <Text color="superGreen" textAlign="center" width="20px">
             {active && <Check height="0.95em" />}
           </Text>
         )}
         <Text mr={2}>{item.name}</Text>
 
-        <Flex alignItems="center" justifyContent="flex-end" width="20px" color="gray" ml="auto">
+        <Flex alignItems="center" color="gray" justifyContent="flex-end" ml="auto" width="20px">
           {hasChildren && <AngleRight height="8px" />}
         </Flex>
       </Flex>
@@ -125,16 +125,16 @@ export const MenuItem = withTheme(
  */
 class Dropdown extends React.Component {
   state = {
-    isOpen: false
+    isOpen: false,
   }
 
   static propTypes = {
-    theme: PropTypes.object.isRequired,
-    justify: PropTypes.string,
     activeKey: PropTypes.string.isRequired,
+    buttonOpacity: PropTypes.number,
     items: PropTypes.array.isRequired,
+    justify: PropTypes.string,
     onChange: PropTypes.func,
-    buttonOpacity: PropTypes.number
+    theme: PropTypes.object.isRequired,
   }
 
   componentDidMount() {
@@ -178,7 +178,7 @@ class Dropdown extends React.Component {
       if (typeof item === 'string') {
         return {
           name: item,
-          key: item
+          key: item,
         }
       }
       return item
@@ -187,9 +187,9 @@ class Dropdown extends React.Component {
     return (
       <div style={{ display: 'inline-block' }}>
         <DropdownContainer ref={this.setWrapperRef} {...rest}>
-          <DropdownButton type="button" onClick={this.toggleMenu} opacity={buttonOpacity}>
+          <DropdownButton onClick={this.toggleMenu} opacity={buttonOpacity} type="button">
             <Flex alignItems="center">
-              <Text textAlign="left" mr={1}>
+              <Text mr={1} textAlign="left">
                 {selectedItem ? selectedItem.name : activeKey}{' '}
               </Text>
               {isOpen ? <AngleUp width="0.6em" /> : <AngleDown width="0.6em" />}
@@ -202,9 +202,9 @@ class Dropdown extends React.Component {
                   return (
                     <MenuItem
                       key={item.key}
+                      active={activeKey === item.key}
                       item={item}
                       onClick={() => this.handleClick(item.key)}
-                      active={activeKey === item.key}
                     />
                   )
                 })}
diff --git a/app/components/UI/FiatAmountInput.js b/app/components/UI/FiatAmountInput.js
index 06d9f0c842e..69dfa3ec164 100644
--- a/app/components/UI/FiatAmountInput.js
+++ b/app/components/UI/FiatAmountInput.js
@@ -15,13 +15,13 @@ import Input from './Input'
  */
 class FiatAmountInput extends React.Component {
   static propTypes = {
-    fieldApi: PropTypes.object.isRequired,
-    fieldState: PropTypes.object.isRequired,
     currency: PropTypes.string.isRequired,
     currentTicker: PropTypes.object.isRequired,
-    required: PropTypes.bool,
+    fieldApi: PropTypes.object.isRequired,
+    fieldState: PropTypes.object.isRequired,
+    isRequired: PropTypes.bool,
+    onBlur: PropTypes.func,
     onChange: PropTypes.func,
-    onBlur: PropTypes.func
   }
 
   componentDidUpdate(prevProps) {
@@ -58,14 +58,14 @@ class FiatAmountInput extends React.Component {
     return {
       precision: 2,
       placeholder: '0.00',
-      pattern: '[0-9]*.?[0-9]{0,2}?'
+      pattern: '[0-9]*.?[0-9]{0,2}?',
     }
   }
 
   render() {
     const rules = this.getRules()
     return (
-      <Input {...this.props} type="text" placeholder={rules.placeholder} pattern={rules.pattern} />
+      <Input {...this.props} pattern={rules.pattern} placeholder={rules.placeholder} type="text" />
     )
   }
 }
@@ -74,19 +74,19 @@ const FiatAmountInputAsField = FiatAmountInput
 
 class WrappedFiatAmountInputAsField extends React.Component {
   static propTypes = {
-    disabled: PropTypes.bool,
-    required: PropTypes.bool,
-    validate: PropTypes.func
+    isDisabled: PropTypes.bool,
+    isRequired: PropTypes.bool,
+    validate: PropTypes.func,
   }
 
   static defaultProps = {
-    disabled: false,
-    required: false
+    isDisabled: false,
+    isRequired: false,
   }
 
   validate = value => {
-    const { disabled, required } = this.props
-    if (disabled) {
+    const { isDisabled, isRequired } = this.props
+    if (isDisabled) {
       return
     }
     try {
@@ -95,7 +95,7 @@ class WrappedFiatAmountInputAsField extends React.Component {
         .positive()
         .min(0)
         .typeError('A number is required')
-      if (required) {
+      if (isRequired) {
         validator = validator.required().moreThan(0)
       }
       validator.validateSync(Number(value))
diff --git a/app/components/UI/Form.js b/app/components/UI/Form.js
index 915557e128a..f009814b52b 100644
--- a/app/components/UI/Form.js
+++ b/app/components/UI/Form.js
@@ -5,7 +5,7 @@ import { Form as InformedForm } from 'informed'
 // Create an html input element that accepts all style props from styled-system.
 const Form = system(
   {
-    extend: InformedForm
+    extend: InformedForm,
   },
   ...Object.keys(styles)
 )
diff --git a/app/components/UI/Header.js b/app/components/UI/Header.js
index 7305304ecb0..c6c93af8e0e 100644
--- a/app/components/UI/Header.js
+++ b/app/components/UI/Header.js
@@ -7,12 +7,12 @@ import Text from './Text'
 const Header = ({ title, subtitle, align, logo }) => (
   <Flex alignItems={align} as="header" flexDirection="column" justifyContent={align}>
     {logo && (
-      <Text textAlign={align} fontSize="50px" lineHeight="1em" css={{ height: '50px' }}>
+      <Text css={{ height: '50px' }} fontSize="50px" lineHeight="1em" textAlign={align}>
         {logo}
       </Text>
     )}
     {title && (
-      <Heading.h1 textAlign={align} mb={1}>
+      <Heading.h1 mb={1} textAlign={align}>
         {title}
       </Heading.h1>
     )}
@@ -20,13 +20,13 @@ const Header = ({ title, subtitle, align, logo }) => (
   </Flex>
 )
 Header.propTypes = {
-  title: PropTypes.node,
-  subtitle: PropTypes.node,
+  align: PropTypes.string,
   logo: PropTypes.node,
-  align: PropTypes.string
+  subtitle: PropTypes.node,
+  title: PropTypes.node,
 }
 Header.defaultProps = {
-  align: 'center'
+  align: 'center',
 }
 
 export default Header
diff --git a/app/components/UI/Heading.js b/app/components/UI/Heading.js
index e195c312e96..91b5d905285 100644
--- a/app/components/UI/Heading.js
+++ b/app/components/UI/Heading.js
@@ -18,10 +18,10 @@ class Heading extends React.PureComponent {
     return (
       <StyledHeading
         as="h2"
-        lineHeight="1.2"
-        fontWeight="light"
-        fontSize={5}
         color="primaryText"
+        fontSize={5}
+        fontWeight="light"
+        lineHeight="1.2"
         {...this.props}
       />
     )
diff --git a/app/components/UI/Input.js b/app/components/UI/Input.js
index 8ae468ebc07..9e56a2b6b4e 100644
--- a/app/components/UI/Input.js
+++ b/app/components/UI/Input.js
@@ -21,13 +21,13 @@ function isFieldValid({ value, error, asyncError, touched }) {
 
 function mapDefaultBorderColor(props) {
   const {
-    disabled,
-    readOnly,
+    isDisabled,
+    isReadOnly,
     fieldState,
     fieldState: { error, asyncError },
     theme: {
-      colors: { gray, superGreen, superRed }
-    }
+      colors: { gray, superGreen, superRed },
+    },
   } = props
 
   let borderColor = gray
@@ -36,7 +36,7 @@ function mapDefaultBorderColor(props) {
     return borderColor
   }
 
-  if (readOnly || disabled) {
+  if (isReadOnly || isDisabled) {
     borderColor = gray
   } else if (error || asyncError) {
     borderColor = superRed
@@ -50,8 +50,8 @@ function mapFocusBorderColor(props) {
   const {
     fieldState,
     theme: {
-      colors: { lightningOrange, superGreen }
-    }
+      colors: { lightningOrange, superGreen },
+    },
   } = props
 
   if (!props.highlightOnValid) {
@@ -82,7 +82,7 @@ const SystemInput = styled(
       fontSize: 'm',
       fontWeight: 'light',
       p: 3,
-      width: 1
+      width: 1,
     },
     'space',
     'color',
@@ -95,7 +95,7 @@ const SystemInput = styled(
     'width'
   )
 )`
-  opacity: ${props => (props.disabled || props.readOnly ? '0.6' : 'inherit')};
+  opacity: ${props => (props.isDisabled || props.isReadOnly ? '0.6' : 'inherit')};
   outline: none;
   border-color: ${mapDefaultBorderColor};
   &:not([readOnly]):not([disabled]):focus {
@@ -117,39 +117,43 @@ class Input extends React.Component {
   static displayName = 'Input'
 
   static propTypes = {
-    autoFocus: PropTypes.bool,
-    type: PropTypes.string,
     className: PropTypes.string,
     description: PropTypes.node,
-    forwardedRef: PropTypes.object,
-    label: PropTypes.node,
-    required: PropTypes.bool,
-    theme: PropTypes.object.isRequired,
     field: PropTypes.string.isRequired,
     fieldApi: PropTypes.object.isRequired,
     fieldState: PropTypes.object.isRequired,
+    forwardedRef: PropTypes.object,
+    hasMessage: PropTypes.bool,
     highlightOnValid: PropTypes.bool,
     iconSize: PropTypes.number,
+    isDisabled: PropTypes.bool,
+    isReadOnly: PropTypes.bool,
+    isRequired: PropTypes.bool,
     justifyContent: PropTypes.string,
-    showMessage: PropTypes.bool,
-    variant: PropTypes.string,
-    onChange: PropTypes.func,
+    label: PropTypes.node,
     onBlur: PropTypes.func,
+    onChange: PropTypes.func,
     onFocus: PropTypes.func,
-    tooltip: PropTypes.string
+    theme: PropTypes.object.isRequired,
+    tooltip: PropTypes.string,
+    type: PropTypes.string,
+    variant: PropTypes.string,
+    willAutoFocus: PropTypes.bool,
   }
 
   static defaultProps = {
-    required: false,
-    showMessage: true,
-    autoFocus: false,
+    isRequired: false,
+    isReadOnly: false,
+    isDisabled: false,
+    hasMessage: true,
+    willAutoFocus: false,
     highlightOnValid: true,
     iconSize: 46,
-    tooltip: null
+    tooltip: null,
   }
 
   state = {
-    hasFocus: false
+    hasFocus: false,
   }
 
   constructor(props) {
@@ -159,8 +163,8 @@ class Input extends React.Component {
   }
 
   componentDidMount() {
-    const { autoFocus } = this.props
-    if (autoFocus) {
+    const { willAutoFocus } = this.props
+    if (willAutoFocus) {
       this.inputRef.current.focus()
     }
   }
@@ -173,7 +177,9 @@ class Input extends React.Component {
       onFocus,
       forwardedRef,
       label,
-      required,
+      isDisabled,
+      isReadOnly,
+      isRequired,
       theme,
       type,
       field,
@@ -181,7 +187,7 @@ class Input extends React.Component {
       fieldState,
       iconSize,
       justifyContent,
-      showMessage,
+      hasMessage,
       variant,
       className,
       tooltip,
@@ -212,8 +218,8 @@ class Input extends React.Component {
           <Flex mb={2}>
             <Label htmlFor={field}>
               {label}
-              {required && (
-                <Span fontSize="s" css={{ 'vertical-align': 'top' }}>
+              {isRequired && (
+                <Span css={{ 'vertical-align': 'top' }} fontSize="s">
                   {' '}
                   *
                 </Span>
@@ -228,19 +234,10 @@ class Input extends React.Component {
           <SystemInput
             p={variant === 'thin' ? 2 : 3}
             {...rest}
+            ref={this.inputRef}
+            disabled={isDisabled}
             field={field}
-            type={type}
-            theme={theme}
             fieldState={fieldState}
-            ref={this.inputRef}
-            value={!value && value !== 0 ? '' : value}
-            required={required}
-            onChange={e => {
-              setValue(e.target.value)
-              if (onChange) {
-                onChange(e)
-              }
-            }}
             onBlur={e => {
               setTouched()
               // Make the state aware that the element is now focused.
@@ -252,6 +249,12 @@ class Input extends React.Component {
                 onBlur(e)
               }
             }}
+            onChange={e => {
+              setValue(e.target.value)
+              if (onChange) {
+                onChange(e)
+              }
+            }}
             onFocus={e => {
               // Make the state aware that the element is no longer focused.
               const newHasFocus = document.activeElement === this.inputRef.current
@@ -263,6 +266,11 @@ class Input extends React.Component {
               }
             }}
             pl={type === 'search' ? 35 : null}
+            readOnly={isReadOnly}
+            required={isRequired}
+            theme={theme}
+            type={type}
+            value={!value && value !== 0 ? '' : value}
           />
         </Flex>
 
@@ -271,8 +279,8 @@ class Input extends React.Component {
             {description}
           </Text>
         )}
-        {type !== 'hidden' && showMessage && (fieldState.error || fieldState.asyncError) && (
-          <Message variant={hasFocus ? 'warning' : 'error'} mt={1}>
+        {type !== 'hidden' && hasMessage && (fieldState.error || fieldState.asyncError) && (
+          <Message mt={1} variant={hasFocus ? 'warning' : 'error'}>
             {fieldState.error || fieldState.asyncError}
           </Message>
         )}
diff --git a/app/components/UI/Label.js b/app/components/UI/Label.js
index bdc7e098253..bfd54fa5bb6 100644
--- a/app/components/UI/Label.js
+++ b/app/components/UI/Label.js
@@ -10,7 +10,7 @@ const SystemLabel = system(
     color: 'primaryText',
     fontSize: 'm',
     fontWeight: 'normal',
-    mb: 1
+    mb: 1,
   },
   ...Object.keys(styles)
 )
diff --git a/app/components/UI/LightningInvoiceInput.js b/app/components/UI/LightningInvoiceInput.js
index f5abfbadaa1..49005da22f4 100644
--- a/app/components/UI/LightningInvoiceInput.js
+++ b/app/components/UI/LightningInvoiceInput.js
@@ -22,26 +22,26 @@ class LightningInvoiceInput extends React.Component {
   static displayName = 'LightningInvoiceInput'
 
   static propTypes = {
-    intl: intlShape.isRequired,
-    required: PropTypes.bool,
     chain: PropTypes.oneOf(['bitcoin', 'litecoin']),
-    network: PropTypes.oneOf(['mainnet', 'testnet', 'regtest'])
+    intl: intlShape.isRequired,
+    isRequired: PropTypes.bool,
+    network: PropTypes.oneOf(['mainnet', 'testnet', 'regtest']),
   }
 
   static defaultProps = {
-    required: false
+    isRequired: false,
   }
 
   validate = value => {
     const { intl } = this.props
-    const { network, chain, required } = this.props
+    const { network, chain, isRequired } = this.props
 
     let chainName = `${chain}/lightning`
     if (network !== 'mainnet') {
       chainName += ` (${network})`
     }
 
-    if (required && (!value || value.trim() === '')) {
+    if (isRequired && (!value || value.trim() === '')) {
       return intl.formatMessage({ ...messages.required_field })
     }
     if (value && !isLn(value, chain, network) && !isOnchain(value, chain, network)) {
@@ -56,7 +56,7 @@ class LightningInvoiceInput extends React.Component {
       <InformedTextArea
         placeholder={intl.formatMessage(
           {
-            ...messages.payreq_placeholder
+            ...messages.payreq_placeholder,
           },
           { chain }
         )}
@@ -81,11 +81,11 @@ const InformedTextArea = asField(({ fieldState, fieldApi, ...props }) => {
     <React.Fragment>
       <TextArea {...rest} />
       {value && !fieldState.error && (
-        <Message variant="success" mt={2}>
+        <Message mt={2} variant="success">
           <FormattedMessage
             {...messages.valid_request}
             values={{
-              chain: chainName
+              chain: chainName,
             }}
           />
         </Message>
diff --git a/app/components/UI/Link.js b/app/components/UI/Link.js
index 15758707389..8c2862b8734 100644
--- a/app/components/UI/Link.js
+++ b/app/components/UI/Link.js
@@ -12,7 +12,7 @@ class Link extends React.PureComponent {
   static displayName = 'Link'
 
   static propTypes = {
-    children: PropTypes.node
+    children: PropTypes.node,
   }
 
   render() {
diff --git a/app/components/UI/LndConnectionStringEditor.js b/app/components/UI/LndConnectionStringEditor.js
index 194606cf36a..b190d864c9e 100644
--- a/app/components/UI/LndConnectionStringEditor.js
+++ b/app/components/UI/LndConnectionStringEditor.js
@@ -25,11 +25,11 @@ function LndConnectionStringEditor({ formApi, field, hideStringMessage, ...rest
       <LndConnectionStringInput
         {...rest}
         {...getValue(isDisabled)}
-        readOnly={isDisabled}
         field={field}
+        isReadOnly={isDisabled}
         rows={12}
       />
-      <Flex justifyContent="space-between" alignItems="center" mt={3}>
+      <Flex alignItems="center" justifyContent="space-between" mt={3}>
         <Flex>
           <Span color="gray" fontSize="s" mr={2}>
             <Padlock />
@@ -45,9 +45,9 @@ function LndConnectionStringEditor({ formApi, field, hideStringMessage, ...rest
 }
 
 LndConnectionStringEditor.propTypes = {
+  field: PropTypes.string.isRequired,
   formApi: PropTypes.object.isRequired,
   hideStringMessage: PropTypes.object.isRequired,
-  field: PropTypes.string.isRequired
 }
 
 export default withFormApi(LndConnectionStringEditor)
diff --git a/app/components/UI/LndConnectionStringInput.js b/app/components/UI/LndConnectionStringInput.js
index 783f33cce3b..714e1f419b4 100644
--- a/app/components/UI/LndConnectionStringInput.js
+++ b/app/components/UI/LndConnectionStringInput.js
@@ -19,8 +19,8 @@ class LndConnectionStringInput extends React.Component {
   static displayName = 'LndConnectionStringInput'
 
   static propTypes = {
+    initialValue: PropTypes.string,
     intl: intlShape.isRequired,
-    initialValue: PropTypes.string
   }
 
   prettyPrint = json => {
@@ -53,9 +53,9 @@ class LndConnectionStringInput extends React.Component {
 
     return (
       <TextArea
-        placeholder={intl.formatMessage({ ...messages.lnd_connection_string_placeholder })}
         css={{ 'word-break': 'break-all' }}
         initialValue={initialValue}
+        placeholder={intl.formatMessage({ ...messages.lnd_connection_string_placeholder })}
         {...rest}
         spellCheck="false"
         validate={this.validate}
diff --git a/app/components/UI/Message.js b/app/components/UI/Message.js
index a8ab472d20a..772079432b4 100644
--- a/app/components/UI/Message.js
+++ b/app/components/UI/Message.js
@@ -21,15 +21,15 @@ class Message extends React.Component {
   static displayName = 'Message'
 
   static propTypes = {
+    children: PropTypes.node,
     justifyContent: PropTypes.string,
     variant: PropTypes.string,
-    children: PropTypes.node
   }
 
   renderIcon = () => {
     const { variant } = this.props
     return (
-      <Box mr={1} width="14px" css={{ height: '14px' }}>
+      <Box css={{ height: '14px' }} mr={1} width="14px">
         {variant === 'success' && <Success height="14px" width="14px" />}
         {variant === 'warning' && <Warning height="14px" width="14px" />}
         {variant === 'error' && <Error height="14px" width="14px" />}
diff --git a/app/components/UI/Modal.js b/app/components/UI/Modal.js
index 639262695c0..dd465211b26 100644
--- a/app/components/UI/Modal.js
+++ b/app/components/UI/Modal.js
@@ -31,23 +31,23 @@ export const ModalOverlayStyles = () => `
 const ModalCloseButton = ({ onClose }) => (
   <Flex justifyContent="flex-end">
     <ModalCloseButtonWrapper onClick={onClose} p={2}>
-      <X width={20} height={20} />
+      <X height={20} width={20} />
     </ModalCloseButtonWrapper>
   </Flex>
 )
 
 ModalCloseButton.propTypes = {
-  onClose: PropTypes.func
+  onClose: PropTypes.func,
 }
 
 const ModalHeader = () => (
   <Flex justifyContent="space-between" px={3}>
     <Box color="primaryText">
-      <ZapLogo width="70px" height="32px" />
+      <ZapLogo height="32px" width="70px" />
     </Box>
     <Text
-      fontWeight="normal"
       css={{ cursor: 'pointer', opacity: 0.6, '&:hover': { opacity: 1 } }}
+      fontWeight="normal"
       onClick={() => window.Zap.openHelpPage()}
     >
       <FormattedMessage {...messages.help} />
@@ -62,14 +62,14 @@ const ModalHeader = () => (
  * <Modal>Some content</Modal>
  */
 const Modal = props => {
-  const { children, onClose, withClose, withHeader, ...rest } = props
+  const { children, onClose, hasClose, hasHeader, ...rest } = props
   return (
     <Panel bg="primaryColor" color="primaryText">
       <Panel.Header pt={3} px={3}>
-        {withClose && <ModalCloseButton onClose={onClose} />}
-        {withHeader && <ModalHeader />}
+        {hasClose && <ModalCloseButton onClose={onClose} />}
+        {hasHeader && <ModalHeader />}
       </Panel.Header>
-      <Panel.Body px={4} pb={4} {...rest} css={{ 'overflow-y': 'overlay', 'overflow-x': 'hidden' }}>
+      <Panel.Body pb={4} px={4} {...rest} css={{ 'overflow-y': 'overlay', 'overflow-x': 'hidden' }}>
         {children}
       </Panel.Body>
     </Panel>
@@ -78,14 +78,14 @@ const Modal = props => {
 
 Modal.propTypes = {
   children: PropTypes.node,
+  hasClose: PropTypes.bool,
+  hasHeader: PropTypes.bool,
   onClose: PropTypes.func,
-  withClose: PropTypes.bool,
-  withHeader: PropTypes.bool
 }
 
 Modal.defaultProps = {
-  withClose: true,
-  withHeader: false
+  hasClose: true,
+  hasHeader: false,
 }
 
 export default Modal
diff --git a/app/components/UI/NodePubkeyInput.js b/app/components/UI/NodePubkeyInput.js
index ee173c30d65..deeef017a8b 100644
--- a/app/components/UI/NodePubkeyInput.js
+++ b/app/components/UI/NodePubkeyInput.js
@@ -14,19 +14,19 @@ import messages from './messages'
 class NodePubkeyInput extends React.Component {
   static propTypes = {
     intl: intlShape.isRequired,
-    disabled: PropTypes.bool,
-    required: PropTypes.bool,
-    validate: PropTypes.func
+    isDisabled: PropTypes.bool,
+    isRequired: PropTypes.bool,
+    validate: PropTypes.func,
   }
 
   validate = value => {
-    const { disabled, required, validate } = this.props
-    if (disabled) {
+    const { isDisabled, isRequired, validate } = this.props
+    if (isDisabled) {
       return
     }
     try {
       let validator = yup.string()
-      if (required) {
+      if (isRequired) {
         validator = validator.required()
       }
       validator = validator.matches(/(.+@.+)/, 'Invalid format')
@@ -49,8 +49,8 @@ class NodePubkeyInput extends React.Component {
       <NodePubkeyInputAsField
         placeholder={intl.formatMessage({ ...messages.pubkey_placeholder })}
         {...rest}
-        validate={this.validate}
         type="text"
+        validate={this.validate}
       />
     )
   }
@@ -63,7 +63,7 @@ const NodePubkeyInputAsField = asField(({ fieldState, fieldApi, ...rest }) => {
     <React.Fragment>
       <Input {...rest} />
       {value && !error && (
-        <Message variant="success" mt={2}>
+        <Message mt={2} variant="success">
           <FormattedMessage {...messages.valid_pubkey} />
         </Message>
       )}
diff --git a/app/components/UI/Notification.js b/app/components/UI/Notification.js
index 7c6205a3560..430a35b7366 100644
--- a/app/components/UI/Notification.js
+++ b/app/components/UI/Notification.js
@@ -17,14 +17,14 @@ class Notification extends React.Component {
   static displayName = 'Notification'
 
   static defaultProps = {
-    processing: false,
-    variant: 'success'
+    isProcessing: false,
+    variant: 'success',
   }
 
   static propTypes = {
     children: PropTypes.node,
-    processing: PropTypes.bool,
-    variant: PropTypes.string
+    isProcessing: PropTypes.bool,
+    variant: PropTypes.string,
   }
 
   state = { hover: false }
@@ -38,15 +38,15 @@ class Notification extends React.Component {
   }
 
   render() {
-    const { children, processing, variant, ...rest } = this.props
+    const { children, isProcessing, variant, ...rest } = this.props
     const { hover } = this.state
     return (
       <Card
-        px={3}
-        py={3}
         borderRadius="5px"
         boxShadow="0 3px 4px 0 rgba(30, 30, 30, 0.5)"
         css={{ cursor: 'pointer' }}
+        px={3}
+        py={3}
         {...this.props}
         onMouseEnter={this.hoverOn}
         onMouseLeave={this.hoverOff}
@@ -55,10 +55,10 @@ class Notification extends React.Component {
         <Flex justifyContent="space-between">
           <Flex alignItems="center">
             <Text fontSize={17}>
-              {processing && <Spinner size="2em" mr="0.5em" />}
-              {!processing && variant === 'success' && <Success />}
-              {!processing && variant === 'warning' && <Warning />}
-              {!processing && variant === 'error' && <Error />}
+              {isProcessing && <Spinner mr="0.5em" size="2em" />}
+              {!isProcessing && variant === 'success' && <Success />}
+              {!isProcessing && variant === 'warning' && <Warning />}
+              {!isProcessing && variant === 'error' && <Error />}
             </Text>
             <Text fontWeight="normal" ml={2}>
               {children}
diff --git a/app/components/UI/OpenDialogInput.js b/app/components/UI/OpenDialogInput.js
index 11bec54395e..450381c1635 100644
--- a/app/components/UI/OpenDialogInput.js
+++ b/app/components/UI/OpenDialogInput.js
@@ -19,7 +19,7 @@ const OpenDialogInput = asField(props => {
   return (
     <WithOpenDialog
       render={({ openDialog }) => (
-        <Flex mb={3} flexDirection="row" alignItems="center">
+        <Flex alignItems="center" flexDirection="row" mb={3}>
           <InnerInput width={1} {...props} />
           <OpenDialogButton
             onClick={() => {
diff --git a/app/components/UI/Page.js b/app/components/UI/Page.js
index 3db68dba1f4..4bf253df07a 100644
--- a/app/components/UI/Page.js
+++ b/app/components/UI/Page.js
@@ -10,8 +10,8 @@ import { Flex } from 'rebass'
  */
 const Page = ({ css, ...rest }) => (
   <Flex
-    bg="primaryColor"
     as="article"
+    bg="primaryColor"
     css={Object.assign(
       {
         position: 'relative',
@@ -19,7 +19,7 @@ const Page = ({ css, ...rest }) => (
         overflow: 'hidden',
         'min-width': '900px',
         'min-height': '425px',
-        'box-shadow': '0 20px 70px rgba(0, 0, 0, 0.55)'
+        'box-shadow': '0 20px 70px rgba(0, 0, 0, 0.55)',
       },
       css
     )}
@@ -28,7 +28,7 @@ const Page = ({ css, ...rest }) => (
 )
 
 Page.propTypes = {
-  css: PropTypes.object
+  css: PropTypes.object,
 }
 
 export default Page
diff --git a/app/components/UI/Panel.js b/app/components/UI/Panel.js
index 5e626486152..d82b9be9dd7 100644
--- a/app/components/UI/Panel.js
+++ b/app/components/UI/Panel.js
@@ -29,14 +29,14 @@ class Panel extends React.Component {
   static Footer = PanelFooter
 
   static propTypes = {
+    children: PropTypes.node,
     css: PropTypes.object,
-    children: PropTypes.node
   }
 
   render() {
     const { children, ...rest } = this.props
     return (
-      <Flex {...rest} as="article" flexDirection="column" css={{ height: '100%' }} {...rest}>
+      <Flex {...rest} as="article" css={{ height: '100%' }} flexDirection="column" {...rest}>
         {children}
       </Flex>
     )
diff --git a/app/components/UI/PasswordInput.js b/app/components/UI/PasswordInput.js
index 094e002962a..3bd40426840 100644
--- a/app/components/UI/PasswordInput.js
+++ b/app/components/UI/PasswordInput.js
@@ -20,24 +20,24 @@ const PasswordInputAsField = asField(PasswordInput)
 
 class WrappedPasswordInputAsField extends React.Component {
   static propTypes = {
-    disabled: PropTypes.bool,
-    required: PropTypes.bool,
-    validate: PropTypes.func
+    isDisabled: PropTypes.bool,
+    isRequired: PropTypes.bool,
+    validate: PropTypes.func,
   }
 
   static defaultProps = {
-    disabled: false,
-    required: false
+    isDisabled: false,
+    isRequired: false,
   }
 
   validate = value => {
-    const { disabled, required } = this.props
-    if (disabled) {
+    const { isDisabled, isRequired } = this.props
+    if (isDisabled) {
       return
     }
     try {
       let validator = yup.string().min(8)
-      if (required) {
+      if (isRequired) {
         validator = validator.required()
       }
       validator.validateSync(value)
diff --git a/app/components/UI/ProgressBar.js b/app/components/UI/ProgressBar.js
index b4b227bb4cd..a9d5f976b1f 100644
--- a/app/components/UI/ProgressBar.js
+++ b/app/components/UI/ProgressBar.js
@@ -8,13 +8,13 @@ import { tint } from 'polished'
 const SystemCard = system({ extend: BaseCard }, 'height')
 
 const EmptyBar = ({ children, ...rest }) => (
-  <SystemCard color="primaryText" height={10} borderRadius={8} {...rest}>
+  <SystemCard borderRadius={8} color="primaryText" height={10} {...rest}>
     {children}
   </SystemCard>
 )
 
 EmptyBar.propTypes = {
-  children: PropTypes.node
+  children: PropTypes.node,
 }
 
 const FilledBar = styled(EmptyBar)`
@@ -28,22 +28,22 @@ const FilledBar = styled(EmptyBar)`
 
 const ProgressBar = ({ progress, color, bg, justify, ...rest }) => (
   <EmptyBar bg={bg} {...rest}>
-    {progress > 0 && <FilledBar width={progress} bg={color} justify={justify} />}
+    {progress > 0 && <FilledBar bg={color} justify={justify} width={progress} />}
   </EmptyBar>
 )
 
 ProgressBar.propTypes = {
-  progress: PropTypes.number,
   bg: PropTypes.string,
   color: PropTypes.string,
-  justify: PropTypes.string
+  justify: PropTypes.string,
+  progress: PropTypes.number,
 }
 
 ProgressBar.defaultProps = {
   progress: 0,
   bg: 'tertiaryColor',
   color: 'lightningOrange',
-  justify: 'left'
+  justify: 'left',
 }
 
 export default ProgressBar
diff --git a/app/components/UI/QRCode.js b/app/components/UI/QRCode.js
index c168bc66be0..3d2a40ab688 100644
--- a/app/components/UI/QRCode.js
+++ b/app/components/UI/QRCode.js
@@ -62,8 +62,8 @@ const CodeWrapper = styled(Box)`
   position: absolute;
   top: calc(10% - 2px);
   left: calc(10% - 2px);
-  filter: ${props => (props.obfuscate ? 'blur(3px)' : 'none')};
-  transition: ${props => (props.obfuscate ? 'none' : 'all 0.5s ease')};
+  filter: ${props => (props.isObfuscated ? 'blur(3px)' : 'none')};
+  transition: ${props => (props.isObfuscated ? 'none' : 'all 0.5s ease')};
 `
 const Mask = styled(Box)`
   background-color: white;
@@ -75,8 +75,8 @@ const Mask = styled(Box)`
   filter: blur(4px);
   width: 50%;
   height: 50%;
-  opacity: ${props => (props.obfuscate ? 100 : 0)};
-  transition: ${props => (props.obfuscate ? 'none' : 'all 0.5s ease')};
+  opacity: ${props => (props.isObfuscated ? 100 : 0)};
+  transition: ${props => (props.isObfuscated ? 'none' : 'all 0.5s ease')};
 `
 const Code = styled(QRCode)`
   border-style: solid;
@@ -97,13 +97,13 @@ class ZapQRCode extends React.PureComponent {
   static displayName = 'QRCode'
 
   static propTypes = {
-    size: PropTypes.string,
-    color: PropTypes.string,
     bg: PropTypes.string,
     border: PropTypes.number,
-    obfuscate: PropTypes.bool,
+    color: PropTypes.string,
+    isObfuscated: PropTypes.bool,
+    size: PropTypes.string,
     theme: PropTypes.object.isRequired,
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   }
 
   static defaultProps = {
@@ -111,11 +111,11 @@ class ZapQRCode extends React.PureComponent {
     color: 'black',
     bg: 'white',
     border: 1,
-    obfuscate: false
+    isObfuscated: false,
   }
 
   render() {
-    let { bg, color, size, border, obfuscate, theme, value, ...rest } = this.props
+    let { bg, color, size, border, isObfuscated, theme, value, ...rest } = this.props
 
     switch (size) {
       case QRCODE_SIZE_SMALL:
@@ -137,32 +137,32 @@ class ZapQRCode extends React.PureComponent {
     return (
       <Container size={size} {...rest}>
         <CropWrapper size={size}>
-          <TopLeft size={size} border={border} borderRadius="10%" borderColor="lightningOrange" />
-          <TopRight size={size} border={border} borderRadius="10%" borderColor="lightningOrange" />
+          <TopLeft border={border} borderColor="lightningOrange" borderRadius="10%" size={size} />
+          <TopRight border={border} borderColor="lightningOrange" borderRadius="10%" size={size} />
           <BottomLeft
-            size={size}
             border={border}
-            borderRadius="10%"
             borderColor="lightningOrange"
+            borderRadius="10%"
+            size={size}
           />
           <BottomRight
-            size={size}
             border={border}
-            borderRadius="10%"
             borderColor="lightningOrange"
+            borderRadius="10%"
+            size={size}
           />
         </CropWrapper>
-        <CodeWrapper obfuscate={obfuscate}>
+        <CodeWrapper isObfuscated={isObfuscated}>
           <Code
-            value={value}
-            size={size}
-            renderAs="svg"
-            fgColor={(theme && theme.colors[color]) || color}
             bgColor={(theme && theme.colors[bg]) || bg}
+            fgColor={(theme && theme.colors[color]) || color}
             level="L"
+            renderAs="svg"
+            size={size}
+            value={value}
           />
         </CodeWrapper>
-        <Mask obfuscate={obfuscate} />
+        <Mask isObfuscated={isObfuscated} />
       </Container>
     )
   }
diff --git a/app/components/UI/Radio.js b/app/components/UI/Radio.js
index e09dd9271d9..7bf791b90cd 100644
--- a/app/components/UI/Radio.js
+++ b/app/components/UI/Radio.js
@@ -68,12 +68,12 @@ const Wrapper = styled(Box)`
 `
 const Radio = ({ value, label, description, fontWeight, onChange, onBlur, ...rest }) => (
   <Wrapper>
-    <Label htmlFor={value} className="container" fontWeight="light" mb={3} {...rest}>
+    <Label className="container" fontWeight="light" htmlFor={value} mb={3} {...rest}>
       <Text>{label}</Text>
-      <InformedRadio value={value} id={value} onChange={onChange} onBlur={onBlur} />
+      <InformedRadio id={value} onBlur={onBlur} onChange={onChange} value={value} />
       <span className="selection" />
       {description && (
-        <Text mt={2} color="gray">
+        <Text color="gray" mt={2}>
           {description}
         </Text>
       )}
@@ -82,12 +82,12 @@ const Radio = ({ value, label, description, fontWeight, onChange, onBlur, ...res
 )
 
 Radio.propTypes = {
+  description: PropTypes.node,
   fontWeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  value: PropTypes.string.isRequired,
   label: PropTypes.node,
-  description: PropTypes.node,
+  onBlur: PropTypes.func,
   onChange: PropTypes.func,
-  onBlur: PropTypes.func
+  value: PropTypes.string.isRequired,
 }
 
 export default Radio
diff --git a/app/components/UI/RadioGroup.js b/app/components/UI/RadioGroup.js
index 182709770a8..a745bbc5840 100644
--- a/app/components/UI/RadioGroup.js
+++ b/app/components/UI/RadioGroup.js
@@ -5,13 +5,13 @@ import Label from './Label'
 import Span from './Span'
 import Text from './Text'
 
-const RadioGroup = ({ label, field, description, required, children, ...rest }) => (
+const RadioGroup = ({ label, field, description, isRequired, children, ...rest }) => (
   <>
     {label && (
       <Label htmlFor={field} mb={2}>
         {label}
-        {required && (
-          <Span fontSize="s" css={{ 'vertical-align': 'top' }}>
+        {isRequired && (
+          <Span css={{ 'vertical-align': 'top' }} fontSize="s">
             {' '}
             *
           </Span>
@@ -19,7 +19,7 @@ const RadioGroup = ({ label, field, description, required, children, ...rest })
       </Label>
     )}
 
-    <InformedRadioGroup field={field} required={required} {...rest}>
+    <InformedRadioGroup field={field} required={isRequired} {...rest}>
       {children}
     </InformedRadioGroup>
 
@@ -32,11 +32,11 @@ const RadioGroup = ({ label, field, description, required, children, ...rest })
 )
 
 RadioGroup.propTypes = {
+  children: PropTypes.node,
   description: PropTypes.node,
-  label: PropTypes.node,
   field: PropTypes.string.isRequired,
-  required: PropTypes.bool,
-  children: PropTypes.node
+  isRequired: PropTypes.bool,
+  label: PropTypes.node,
 }
 
 export default RadioGroup
diff --git a/app/components/UI/Range.js b/app/components/UI/Range.js
index 53d5bbc51bb..0373515b3cc 100644
--- a/app/components/UI/Range.js
+++ b/app/components/UI/Range.js
@@ -71,32 +71,32 @@ const Range = asField(({ fieldState, fieldApi, ...props }) => {
     thumbBackground: 'primaryText',
     shadowSize: '-2px',
     fitThumbInSlider: '-2px',
-    backgroundFilledSlider: 'lightningOrange'
+    backgroundFilledSlider: 'lightningOrange',
   }
 
   return (
     <>
       <Input
         {...styleProps}
-        min={0}
         max={100}
+        min={0}
         step={1}
         {...rest}
-        type="range"
         ref={forwardedRef}
-        value={value || 0}
-        onChange={e => {
-          setValue(e.target.value)
-          if (onChange) {
-            onChange(e)
-          }
-        }}
         onBlur={e => {
           setTouched()
           if (onBlur) {
             onBlur(e)
           }
         }}
+        onChange={e => {
+          setValue(e.target.value)
+          if (onChange) {
+            onChange(e)
+          }
+        }}
+        type="range"
+        value={value || 0}
       />
     </>
   )
diff --git a/app/components/UI/RowLabel.js b/app/components/UI/RowLabel.js
index 12149ceb234..cd756bdb29d 100644
--- a/app/components/UI/RowLabel.js
+++ b/app/components/UI/RowLabel.js
@@ -18,7 +18,7 @@ export default function RowLabel({ nameMessage, descMessage, htmlFor }) {
 }
 
 RowLabel.propTypes = {
-  nameMessage: PropTypes.object.isRequired,
   descMessage: PropTypes.object.isRequired,
-  htmlFor: PropTypes.string
+  htmlFor: PropTypes.string,
+  nameMessage: PropTypes.object.isRequired,
 }
diff --git a/app/components/UI/Select.js b/app/components/UI/Select.js
index 3893f1dd8f7..150351178f3 100644
--- a/app/components/UI/Select.js
+++ b/app/components/UI/Select.js
@@ -32,7 +32,7 @@ const SelectOptionItem = styled(
     {
       extend: Box,
       as: 'li',
-      p: 2
+      p: 2,
     },
     'space',
     'color'
@@ -76,18 +76,18 @@ class Select extends React.PureComponent {
 
   static propTypes = {
     color: PropTypes.string,
+    fieldApi: PropTypes.object.isRequired,
+    fieldState: PropTypes.object.isRequired,
     iconSize: PropTypes.number,
     initialSelectedItem: PropTypes.string,
     items: PropTypes.array,
+    onValueSelected: PropTypes.func,
     theme: PropTypes.object.isRequired,
-    fieldApi: PropTypes.object.isRequired,
-    fieldState: PropTypes.object.isRequired,
-    onValueSelected: PropTypes.func
   }
 
   static defaultProps = {
     items: [],
-    iconSize: 8
+    iconSize: 8,
   }
 
   inputRef = React.createRef()
@@ -107,13 +107,13 @@ class Select extends React.PureComponent {
         {...getItemProps({
           key: item.key,
           index,
-          item
+          item,
         })}
         bg={highlightedIndex === index ? theme.colors.primaryColor : null}
         p={2}
       >
         <Flex alignItems="center" pr={2}>
-          <Text width="20px" textAlign="center" color="superGreen">
+          <Text color="superGreen" textAlign="center" width="20px">
             {selectedItem.key === item.key && <Check height="0.95em" />}
           </Text>
           <Text>{item.value}</Text>
@@ -143,8 +143,16 @@ class Select extends React.PureComponent {
 
     return (
       <Downshift
-        itemToString={itemToString}
+        initialInputValue={initialInputValue}
         // When an item is selected, set the item in the Informed form state.
+        initialSelectedItem={initialSelectedItem}
+        // If an invalid value has been typed into the input, set it back to the currently slected item.
+        itemToString={itemToString}
+        onInputValueChange={(inputValue, stateAndHelpers) => {
+          if (inputValue && inputValue !== itemToString(stateAndHelpers.selectedItem)) {
+            fieldApi.setValue(itemToString(stateAndHelpers.selectedItem))
+          }
+        }}
         onSelect={item => {
           setValue(item.value)
           setTouched(true)
@@ -153,14 +161,6 @@ class Select extends React.PureComponent {
           }
           this.blurInput()
         }}
-        // If an invalid value has been typed into the input, set it back to the currently slected item.
-        onInputValueChange={(inputValue, stateAndHelpers) => {
-          if (inputValue && inputValue !== itemToString(stateAndHelpers.selectedItem)) {
-            fieldApi.setValue(itemToString(stateAndHelpers.selectedItem))
-          }
-        }}
-        initialInputValue={initialInputValue}
-        initialSelectedItem={initialSelectedItem}
       >
         {({
           getInputProps,
@@ -171,7 +171,7 @@ class Select extends React.PureComponent {
           selectedItem,
           closeMenu,
           openMenu,
-          toggleMenu
+          toggleMenu,
         }) => (
           <div style={{ position: 'relative' }}>
             <Flex alignItems="center">
@@ -181,10 +181,10 @@ class Select extends React.PureComponent {
                 {...getInputProps({
                   onBlur: closeMenu,
                   onFocus: openMenu,
-                  onMouseDown: toggleMenu
+                  onMouseDown: toggleMenu,
                 })}
-                initialValue={selectedItem ? selectedItem.value : null}
                 forwardedRef={this.inputRef}
+                initialValue={selectedItem ? selectedItem.value : null}
               />
               <Box>
                 {isOpen ? <ArrowIconOpen width={iconSize} /> : <ArrowIconClosed width={iconSize} />}
diff --git a/app/components/UI/Sidebar.js b/app/components/UI/Sidebar.js
index 643110c540f..824725cf79c 100644
--- a/app/components/UI/Sidebar.js
+++ b/app/components/UI/Sidebar.js
@@ -8,7 +8,7 @@ import BackgroundTertiary from './BackgroundTertiary'
  * <Sidebar>Some content</Sidebar>
  */
 const Sidebar = ({ ...props }) => (
-  <BackgroundTertiary as="aside" width={3 / 12} css={{ overflow: 'hidden' }} {...props} />
+  <BackgroundTertiary as="aside" css={{ overflow: 'hidden' }} width={3 / 12} {...props} />
 )
 
 Sidebar.small = props => <Sidebar {...props} width={4 / 16} />
diff --git a/app/components/UI/Span.js b/app/components/UI/Span.js
index 8b02ffaac80..2ca289e6c3d 100644
--- a/app/components/UI/Span.js
+++ b/app/components/UI/Span.js
@@ -2,7 +2,7 @@ import system from '@rebass/components'
 
 const Span = system(
   {
-    as: 'span'
+    as: 'span',
   },
   'space',
   'color',
diff --git a/app/components/UI/Spinner.js b/app/components/UI/Spinner.js
index 3771410e592..be11c83f98a 100644
--- a/app/components/UI/Spinner.js
+++ b/app/components/UI/Spinner.js
@@ -30,20 +30,20 @@ const WrappedSpinner = ({ element, width, height, ...rest }) => {
   const Element = renderSpinner(Icon)
   return (
     <Box color="lightningOrange" {...rest}>
-      <Element width={width} height={height} />
+      <Element height={height} width={width} />
     </Box>
   )
 }
 
 WrappedSpinner.propTypes = {
   element: PropTypes.node,
+  height: PropTypes.string,
   width: PropTypes.string,
-  height: PropTypes.string
 }
 
 WrappedSpinner.defaultProps = {
   width: '1em',
-  height: '1em'
+  height: '1em',
 }
 
 export default WrappedSpinner
diff --git a/app/components/UI/StatusIndicator.js b/app/components/UI/StatusIndicator.js
index abc3ba4f3fe..31211f2d732 100644
--- a/app/components/UI/StatusIndicator.js
+++ b/app/components/UI/StatusIndicator.js
@@ -18,14 +18,14 @@ const StyledStatusIndicator = styled(Box)(indicatorStyle)
 const StatusIndicator = ({ variant, ...rest }) => (
   <StyledStatusIndicator variant={variant} {...rest}>
     {['loading'].includes(variant) ? (
-      <Spinner width="0.7em" height="0.7em" />
+      <Spinner height="0.7em" width="0.7em" />
     ) : (
-      <Circle width="0.7em" height="0.7em" />
+      <Circle height="0.7em" width="0.7em" />
     )}
   </StyledStatusIndicator>
 )
 StatusIndicator.propTypes = {
-  variant: PropTypes.string
+  variant: PropTypes.string,
 }
 
 export default StatusIndicator
diff --git a/app/components/UI/Tabs.js b/app/components/UI/Tabs.js
index 0412cedaf6b..fa62b0b06d3 100644
--- a/app/components/UI/Tabs.js
+++ b/app/components/UI/Tabs.js
@@ -6,33 +6,33 @@ import Button from './Button'
 import Text from './Text'
 
 const Tab = ({ itemKey, itemValue, isActive, onClick }) => (
-  <Flex mr={3} flexDirection="column" alignItems="center">
+  <Flex alignItems="center" flexDirection="column" mr={3}>
     <Button
-      variant="secondary"
-      size="small"
+      active={isActive}
       onClick={() => onClick(itemKey)}
       px={3}
-      active={isActive}
+      size="small"
+      variant="secondary"
     >
       <Text fontWeight="normal">{itemValue}</Text>
     </Button>
     {isActive && (
-      <Bar width={1} borderColor="lightningOrange" opacity={1} css={{ 'max-width': '50px' }} />
+      <Bar borderColor="lightningOrange" css={{ 'max-width': '50px' }} opacity={1} width={1} />
     )}
   </Flex>
 )
 Tab.propTypes = {
+  isActive: PropTypes.bool.isRequired,
   itemKey: PropTypes.string.isRequired,
   itemValue: PropTypes.node.isRequired,
-  isActive: PropTypes.bool.isRequired,
-  onClick: PropTypes.func.isRequired
+  onClick: PropTypes.func.isRequired,
 }
 
 class Tabs extends React.PureComponent {
   static propTypes = {
-    items: PropTypes.array.isRequired,
     activeKey: PropTypes.string,
-    onClick: PropTypes.func
+    items: PropTypes.array.isRequired,
+    onClick: PropTypes.func,
   }
 
   handleClick = key => {
@@ -51,9 +51,9 @@ class Tabs extends React.PureComponent {
         {items.map(item => (
           <Tab
             key={item.key}
+            isActive={item.key === activeKey}
             itemKey={item.key}
             itemValue={item.name}
-            isActive={item.key === activeKey}
             onClick={this.handleClick}
           />
         ))}
diff --git a/app/components/UI/Text.js b/app/components/UI/Text.js
index e2206493bf5..9f6891f8d87 100644
--- a/app/components/UI/Text.js
+++ b/app/components/UI/Text.js
@@ -16,13 +16,13 @@ class Text extends React.PureComponent {
   static displayName = 'Text'
 
   static propTypes = {
-    children: PropTypes.node
+    children: PropTypes.node,
   }
 
   render() {
     const { children } = this.props
     return (
-      <StyledText lineHeight="1.4" fontSize="m" color="primaryText" {...this.props}>
+      <StyledText color="primaryText" fontSize="m" lineHeight="1.4" {...this.props}>
         {children}
       </StyledText>
     )
diff --git a/app/components/UI/TextArea.js b/app/components/UI/TextArea.js
index fd938d42830..64c68538a2c 100644
--- a/app/components/UI/TextArea.js
+++ b/app/components/UI/TextArea.js
@@ -20,13 +20,13 @@ function isFieldValid({ value, error, asyncError, touched }) {
 
 function mapDefaultBorderColor(props) {
   const {
-    disabled,
-    readOnly,
+    isDisabled,
+    isReadOnly,
     fieldState,
     fieldState: { error, asyncError },
     theme: {
-      colors: { gray, superGreen, superRed }
-    }
+      colors: { gray, superGreen, superRed },
+    },
   } = props
 
   let borderColor = gray
@@ -35,7 +35,7 @@ function mapDefaultBorderColor(props) {
     return borderColor
   }
 
-  if (readOnly || disabled) {
+  if (isReadOnly || isDisabled) {
     borderColor = gray
   } else if (error || asyncError) {
     borderColor = superRed
@@ -49,8 +49,8 @@ function mapFocusBorderColor(props) {
   const {
     fieldState,
     theme: {
-      colors: { lightningOrange, superGreen }
-    }
+      colors: { lightningOrange, superGreen },
+    },
   } = props
 
   if (!props.highlightOnValid) {
@@ -75,7 +75,7 @@ const SystemTextArea = styled(
       fontWeight: 'light',
       p: 3,
       width: 1,
-      rows: 5
+      rows: 5,
     },
     'space',
     'color',
@@ -88,7 +88,7 @@ const SystemTextArea = styled(
     'width'
   )
 )`
-  opacity: ${props => (props.disabled || props.readOnly ? '0.6' : 'inherit')};
+  opacity: ${props => (props.isDisabled || props.isReadOnly ? '0.6' : 'inherit')};
   outline: none;
   border-color: ${mapDefaultBorderColor};
   &:not([readOnly]):not([disabled]):focus {
@@ -107,33 +107,35 @@ class TextArea extends React.PureComponent {
 
   static propTypes = {
     description: PropTypes.string,
-    forwardedRef: PropTypes.object,
-    label: PropTypes.string,
-    required: PropTypes.bool,
-    theme: PropTypes.object.isRequired,
     field: PropTypes.string.isRequired,
     fieldApi: PropTypes.object.isRequired,
     fieldState: PropTypes.object.isRequired,
+    forwardedRef: PropTypes.object,
+    hasMessage: PropTypes.bool,
     highlightOnValid: PropTypes.bool,
+    isDisabled: PropTypes.bool,
+    isReadOnly: PropTypes.bool,
+    isRequired: PropTypes.bool,
     justifyContent: PropTypes.string,
-    showMessage: PropTypes.bool,
-    variant: PropTypes.string,
-    onChange: PropTypes.func,
+    label: PropTypes.string,
     onBlur: PropTypes.func,
+    onChange: PropTypes.func,
     onFocus: PropTypes.func,
-    tooltip: PropTypes.string
+    theme: PropTypes.object.isRequired,
+    tooltip: PropTypes.string,
+    variant: PropTypes.string,
   }
 
   static defaultProps = {
     description: null,
     label: null,
-    showMessage: true,
+    hasMessage: true,
     highlightOnValid: true,
-    tooltip: null
+    tooltip: null,
   }
 
   state = {
-    hasFocus: false
+    hasFocus: false,
   }
 
   constructor(props) {
@@ -150,13 +152,15 @@ class TextArea extends React.PureComponent {
       onFocus,
       forwardedRef,
       label,
-      required,
+      isDisabled,
+      isRequired,
+      isReadOnly,
       theme,
       field,
       fieldApi,
       fieldState,
       justifyContent,
-      showMessage,
+      hasMessage,
       variant,
       tooltip,
       ...rest
@@ -181,8 +185,8 @@ class TextArea extends React.PureComponent {
           <Flex mb={2}>
             <Label htmlFor={field} mb={2}>
               {label}
-              {required && (
-                <Span fontSize="s" css={{ 'vertical-align': 'top' }}>
+              {isRequired && (
+                <Span css={{ 'vertical-align': 'top' }} fontSize="s">
                   {' '}
                   *
                 </Span>
@@ -192,19 +196,10 @@ class TextArea extends React.PureComponent {
           </Flex>
         )}
         <SystemTextArea
-          p={variant === 'thin' ? 2 : 3}
+          ref={this.inputRef}
+          disabled={isDisabled}
           field={field}
-          theme={theme}
           fieldState={fieldState}
-          ref={this.inputRef}
-          value={!value && value !== 0 ? '' : value}
-          required={required}
-          onChange={e => {
-            setValue(e.target.value)
-            if (onChange) {
-              onChange(e)
-            }
-          }}
           onBlur={e => {
             setTouched()
             // Make the state aware that the element is now focused.
@@ -216,6 +211,12 @@ class TextArea extends React.PureComponent {
               onBlur(e)
             }
           }}
+          onChange={e => {
+            setValue(e.target.value)
+            if (onChange) {
+              onChange(e)
+            }
+          }}
           onFocus={e => {
             // Make the state aware that the element is no longer focused.
             const newHasFocus = document.activeElement === this.inputRef.current
@@ -226,6 +227,11 @@ class TextArea extends React.PureComponent {
               onFocus(e)
             }
           }}
+          p={variant === 'thin' ? 2 : 3}
+          readOnly={isReadOnly}
+          required={isRequired}
+          theme={theme}
+          value={!value && value !== 0 ? '' : value}
           {...rest}
         />
         {description && (
@@ -233,8 +239,8 @@ class TextArea extends React.PureComponent {
             {description}
           </Text>
         )}
-        {showMessage && (fieldState.error || fieldState.asyncError) && (
-          <Message variant={hasFocus ? 'warning' : 'error'} mt={1}>
+        {hasMessage && (fieldState.error || fieldState.asyncError) && (
+          <Message mt={1} variant={hasFocus ? 'warning' : 'error'}>
             {fieldState.error || fieldState.asyncError}
           </Message>
         )}
diff --git a/app/components/UI/Toggle.js b/app/components/UI/Toggle.js
index 6e865f74be0..325be62918c 100644
--- a/app/components/UI/Toggle.js
+++ b/app/components/UI/Toggle.js
@@ -61,7 +61,7 @@ const Toggle = ({ fieldState, onLabel, offLabel, ...props }) => (
       <label // eslint-disable-line jsx-a11y/label-has-for,jsx-a11y/label-has-associated-control
         className="switch"
       >
-        <Checkbox type="checkbox" fieldState={fieldState} {...props} />
+        <Checkbox fieldState={fieldState} type="checkbox" {...props} />
         <span className="slider round" />
       </label>
       {fieldState.value && onLabel && <Text ml={2}>{onLabel}</Text>}
@@ -73,8 +73,8 @@ const Toggle = ({ fieldState, onLabel, offLabel, ...props }) => (
 Toggle.propTypes = {
   fieldApi: PropTypes.object.isRequired,
   fieldState: PropTypes.object.isRequired,
+  offLabel: PropTypes.node,
   onLabel: PropTypes.node,
-  offLabel: PropTypes.node
 }
 
 export default asField(Toggle)
diff --git a/app/components/UI/Tooltip.js b/app/components/UI/Tooltip.js
index ed1540884a2..337656ab2e9 100644
--- a/app/components/UI/Tooltip.js
+++ b/app/components/UI/Tooltip.js
@@ -35,7 +35,7 @@ class Tooltip extends React.Component {
   static displayName = 'Tooltip'
 
   static propTypes = {
-    children: PropTypes.node
+    children: PropTypes.node,
   }
 
   state = { hover: false }
@@ -55,28 +55,28 @@ class Tooltip extends React.Component {
     return (
       <Box
         style={{
-          position: 'relative'
+          position: 'relative',
         }}
         {...rest}
       >
         <StyledTooltipIconBox
           bg="primaryText"
+          ml={1}
           onMouseEnter={this.hoverOn}
           onMouseLeave={this.hoverOff}
-          ml={1}
         >
-          <Text fontWeight="bold" color="primaryColor" fontSize="s">
+          <Text color="primaryColor" fontSize="s" fontWeight="bold">
             ?
           </Text>
         </StyledTooltipIconBox>
         {hover && (
           <StyledTooltipWrapper
             bg="secondaryColor"
-            p={2}
-            pl={3}
+            border="1px solid gray"
             borderRadius={5}
             boxShadow="0 3px 4px 0 rgba(30, 30, 30, 0.5)"
-            border="1px solid gray"
+            p={2}
+            pl={3}
           >
             <Text fontWeight="light" ml={2}>
               {children}
diff --git a/app/components/UI/Value.js b/app/components/UI/Value.js
index bbf770922dc..8e219c48543 100644
--- a/app/components/UI/Value.js
+++ b/app/components/UI/Value.js
@@ -51,24 +51,24 @@ const Value = ({ value, currency, currentTicker, fiatTicker, style }) => {
   const trimmedAmount = String(truncatedAmount).replace(/\.?0+$/, '')
   return (
     <FormattedNumber
-      value={trimmedAmount}
+      currency={fiatTicker}
       maximumFractionDigits={dp}
       style={style}
-      currency={fiatTicker}
+      value={trimmedAmount}
     />
   )
 }
 
 Value.propTypes = {
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   currency: PropTypes.string.isRequired,
   currentTicker: PropTypes.object,
   fiatTicker: PropTypes.string,
-  style: PropTypes.oneOf(['decimal', 'currency'])
+  style: PropTypes.oneOf(['decimal', 'currency']),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 }
 
 Value.defaultProps = {
-  style: 'decimal'
+  style: 'decimal',
 }
 
 export default Value
diff --git a/app/components/UI/Wizard.js b/app/components/UI/Wizard.js
index 40c8bc34e18..0e98ad682a7 100644
--- a/app/components/UI/Wizard.js
+++ b/app/components/UI/Wizard.js
@@ -18,16 +18,16 @@ class Steps extends React.Component {
           const fade = {
             from: { opacity: 0, height: '100%' },
             enter: { opacity: 1 },
-            leave: { opacity: 0, height: 0 }
+            leave: { opacity: 0, height: 0 },
           }
           const animationProps = fade
 
           return (
             <Transition
+              config={config.gentle}
               initial={null}
               items={steps[wizardState.currentStep]}
               keys={item => item.key}
-              config={config.gentle}
               {...animationProps}
             >
               {item => props => <Box style={props}>{item}</Box>}
@@ -42,12 +42,12 @@ class Steps extends React.Component {
 class NextButton extends React.Component {
   static propTypes = {
     children: PropTypes.node,
-    navigateTo: PropTypes.number
+    navigateTo: PropTypes.number,
   }
 
   static defaultProps = {
     children: 'Next',
-    navigateTo: null
+    navigateTo: null,
   }
 
   render() {
@@ -59,16 +59,16 @@ class NextButton extends React.Component {
           const { formState } = wizardState
           return (
             <Button
-              type="submit"
+              isDisabled={wizardState.isSubmitting || (formState && formState.invalid)}
+              isProcessing={wizardState.isSubmitting}
               onClick={() => {
-                if (navigateTo !== null) {
-                  wizardApi.navigateTo(navigateTo)
-                } else {
+                if (navigateTo === null) {
                   wizardApi.next()
+                } else {
+                  wizardApi.navigateTo(navigateTo)
                 }
               }}
-              disabled={wizardState.isSubmitting || (formState && formState.invalid)}
-              processing={wizardState.isSubmitting}
+              type="submit"
             >
               <Flex>
                 <Box mr={1}>{children}</Box>
@@ -87,12 +87,12 @@ class NextButton extends React.Component {
 class BackButton extends React.Component {
   static propTypes = {
     children: PropTypes.node,
-    navigateTo: PropTypes.number
+    navigateTo: PropTypes.number,
   }
 
   static defaultProps = {
     children: 'Back',
-    navigateTo: null
+    navigateTo: null,
   }
 
   render() {
@@ -105,16 +105,16 @@ class BackButton extends React.Component {
           }
           return (
             <Button
-              type="button"
-              variant="secondary"
+              isDisabled={wizardState.isSubmitting}
               onClick={() => {
-                if (navigateTo !== null) {
-                  wizardApi.navigateTo(navigateTo)
-                } else {
+                if (navigateTo === null) {
                   wizardApi.previous()
+                } else {
+                  wizardApi.navigateTo(navigateTo)
                 }
               }}
-              disabled={wizardState.isSubmitting}
+              type="button"
+              variant="secondary"
             >
               <Flex>
                 <Box>
@@ -142,7 +142,7 @@ class Debug extends React.Component {
 
 class Step extends React.Component {
   static propTypes = {
-    component: PropTypes.func.isRequired
+    component: PropTypes.func.isRequired,
   }
 
   render() {
@@ -167,7 +167,7 @@ class Wizard extends React.Component {
 
   static propTypes = {
     children: PropTypes.node,
-    steps: PropTypes.array
+    steps: PropTypes.array,
   }
 
   constructor(props) {
@@ -178,7 +178,7 @@ class Wizard extends React.Component {
       currentStep: 0,
       direction: 'next',
       isSubmitting: false,
-      formState: {}
+      formState: {},
     }
   }
 
@@ -191,7 +191,7 @@ class Wizard extends React.Component {
         currentItem: steps[nextStep].key,
         currentStep: nextStep,
         direction: 'previous',
-        formState: {}
+        formState: {},
       })
     }
   }
@@ -205,7 +205,7 @@ class Wizard extends React.Component {
         currentItem: steps[nextStep].key,
         currentStep: nextStep,
         direction: 'next',
-        formState: {}
+        formState: {},
       })
     }
   }
@@ -229,7 +229,7 @@ class Wizard extends React.Component {
       currentItem: steps[stepId].key,
       currentStep: stepId,
       direction: 'previous',
-      formState: {}
+      formState: {},
     })
   }
 
@@ -276,10 +276,10 @@ class Wizard extends React.Component {
             onSubmitFailure: this.onSubmitFailure,
             onChange: this.onChange,
             getApi: this.getApi,
-            getState: () => this.state
+            getState: () => this.state,
           },
           wizardState: this.state,
-          steps
+          steps,
         }}
       >
         {children}
diff --git a/app/components/UI/messages.js b/app/components/UI/messages.js
index 401c931982d..7c65ab6322b 100644
--- a/app/components/UI/messages.js
+++ b/app/components/UI/messages.js
@@ -13,5 +13,5 @@ export default defineMessages({
   invalid_lnd_connection_string: 'Not a valid connection string',
   payreq_placeholder: 'Paste a Lightning Payment Request or {chain} Address here',
   pubkey_placeholder: 'pubkey@host:port',
-  lnd_connection_string_placeholder: 'Paste an Lnd Connect URI or BTCPay Server config here'
+  lnd_connection_string_placeholder: 'Paste an Lnd Connect URI or BTCPay Server config here',
 })
diff --git a/app/components/Util/Truncate.js b/app/components/Util/Truncate.js
index d01ef267b4b..d9e69f65f6d 100644
--- a/app/components/Util/Truncate.js
+++ b/app/components/Util/Truncate.js
@@ -16,8 +16,8 @@ const Truncate = ({ text, maxlen = 12 }) => {
 }
 
 Truncate.propTypes = {
+  maxlen: PropTypes.number,
   text: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  maxlen: PropTypes.number
 }
 
 export default Truncate
diff --git a/app/components/Util/WalletName.js b/app/components/Util/WalletName.js
index 3919e6ab3d1..10ba89fc525 100644
--- a/app/components/Util/WalletName.js
+++ b/app/components/Util/WalletName.js
@@ -13,11 +13,11 @@ const WalletName = ({ wallet }) => {
 
 WalletName.propTypes = {
   wallet: PropTypes.shape({
+    host: PropTypes.string,
     id: PropTypes.number.isRequired,
+    name: PropTypes.string,
     type: PropTypes.string.isRequired,
-    host: PropTypes.string,
-    name: PropTypes.string
-  })
+  }),
 }
 
 export default WalletName
diff --git a/app/components/Wallet/ReceiveModal/ReceiveModal.js b/app/components/Wallet/ReceiveModal/ReceiveModal.js
index b2368e3d462..e3a08dd2cc8 100644
--- a/app/components/Wallet/ReceiveModal/ReceiveModal.js
+++ b/app/components/Wallet/ReceiveModal/ReceiveModal.js
@@ -22,7 +22,7 @@ const ClippedText = styled(Text)`
 class ReceiveModal extends React.PureComponent {
   state = {
     qrCodeType: QRCODE_TYPE_ADDRESS,
-    reveal: false
+    reveal: false,
   }
 
   copyToClipboard = () => {
@@ -31,7 +31,7 @@ class ReceiveModal extends React.PureComponent {
       address,
       activeWalletSettings: { lndconnectQRCode },
       intl,
-      showNotification
+      showNotification,
     } = this.props
     const { qrCodeType } = this.state
 
@@ -57,7 +57,7 @@ class ReceiveModal extends React.PureComponent {
 
   toggleReveal = () => {
     this.setState(prevState => ({
-      reveal: !prevState.reveal
+      reveal: !prevState.reveal,
     }))
   }
 
@@ -110,8 +110,8 @@ class ReceiveModal extends React.PureComponent {
       { key: QRCODE_TYPE_PUBKEY, name: <FormattedMessage {...messages.node_pubkey} /> },
       {
         key: QRCODE_TYPE_ADDRESS,
-        name: <FormattedMessage {...messages.wallet_address} values={{ chain: cryptoName }} />
-      }
+        name: <FormattedMessage {...messages.wallet_address} values={{ chain: cryptoName }} />,
+      },
     ]
     if (activeWalletSettings.lndconnectQRCode) {
       tabs.push({ key: QRCODE_TYPE_LNDCONNECT, name: <FormattedMessage {...messages.node_uri} /> })
@@ -127,24 +127,24 @@ class ReceiveModal extends React.PureComponent {
         <Bar mt={2} />
 
         <Flex justifyContent="center" my={3}>
-          <Tabs onClick={this.setQrcode} activeKey={qrCodeType} items={tabs} />
+          <Tabs activeKey={qrCodeType} items={tabs} onClick={this.setQrcode} />
         </Flex>
 
-        <Flex mt={4} mb={3} alignItems="center" flexDirection="column">
+        <Flex alignItems="center" flexDirection="column" mb={3} mt={4}>
           {qrCode && qrCodeType !== QRCODE_TYPE_LNDCONNECT && (
-            <QRCode value={qrCode} size="xlarge" />
+            <QRCode size="xlarge" value={qrCode} />
           )}
           {qrCodeType === QRCODE_TYPE_LNDCONNECT && (
             <>
               <QRCode
-                value={qrCode}
+                isObfuscated={qrCodeType === QRCODE_TYPE_LNDCONNECT && !reveal}
                 size="xlarge"
-                obfuscate={qrCodeType === QRCODE_TYPE_LNDCONNECT && !reveal}
+                value={qrCode}
               />
-              <Message variant="warning" justifyContent="center" my={3}>
+              <Message justifyContent="center" my={3} variant="warning">
                 <FormattedMessage {...messages.lndconnect_warning} />
               </Message>
-              <Button size="small" onClick={this.toggleReveal}>
+              <Button onClick={this.toggleReveal} size="small">
                 <FormattedMessage
                   {...messages[reveal ? 'lndconnect_hide_button' : 'lndconnect_reveal_button']}
                 />
@@ -154,16 +154,16 @@ class ReceiveModal extends React.PureComponent {
         </Flex>
 
         <Flex bg="tertiaryColor" justifyContent="space-between">
-          <ClippedText p={3} width={1} fontSize="s" textAlign="center">
+          <ClippedText fontSize="s" p={3} textAlign="center" width={1}>
             {qrCode}
           </ClippedText>
           <Button
-            variant="secondary"
-            py={0}
-            px={0}
-            onClick={this.copyToClipboard}
             className="hint--left"
             data-hint={message}
+            onClick={this.copyToClipboard}
+            px={0}
+            py={0}
+            variant="secondary"
           >
             <Box bg="primaryColor" p={3} width={1}>
               <Copy />
@@ -176,22 +176,22 @@ class ReceiveModal extends React.PureComponent {
 }
 
 ReceiveModal.propTypes = {
+  activeWalletSettings: PropTypes.shape({
+    host: PropTypes.string,
+    id: PropTypes.number.isRequired,
+    lndconnectQRCode: PropTypes.string,
+    name: PropTypes.string,
+    type: PropTypes.string.isRequired,
+  }).isRequired,
+  address: PropTypes.string,
+  cryptoName: PropTypes.string,
   intl: intlShape.isRequired,
   networkInfo: PropTypes.shape({
     id: PropTypes.string,
-    name: PropTypes.string
+    name: PropTypes.string,
   }),
-  cryptoName: PropTypes.string,
   pubkey: PropTypes.string,
-  address: PropTypes.string,
-  activeWalletSettings: PropTypes.shape({
-    lndconnectQRCode: PropTypes.string,
-    id: PropTypes.number.isRequired,
-    type: PropTypes.string.isRequired,
-    host: PropTypes.string,
-    name: PropTypes.string
-  }).isRequired,
-  showNotification: PropTypes.func.isRequired
+  showNotification: PropTypes.func.isRequired,
 }
 
 export default withTheme(injectIntl(ReceiveModal))
diff --git a/app/components/Wallet/ReceiveModal/messages.js b/app/components/Wallet/ReceiveModal/messages.js
index 4b2782116c3..ee4de1ca6cf 100644
--- a/app/components/Wallet/ReceiveModal/messages.js
+++ b/app/components/Wallet/ReceiveModal/messages.js
@@ -18,5 +18,5 @@ export default defineMessages({
   lndconnect_warning:
     'Keep this private! If someone gains access to this QR Code they can steal your money.',
   lndconnect_reveal_button: 'Click to reveal QR Code',
-  lndconnect_hide_button: 'Click to hide QR Code'
+  lndconnect_hide_button: 'Click to hide QR Code',
 })
diff --git a/app/components/Wallet/Wallet.js b/app/components/Wallet/Wallet.js
index 95d61da23a8..eb95c52ba0c 100644
--- a/app/components/Wallet/Wallet.js
+++ b/app/components/Wallet/Wallet.js
@@ -15,17 +15,17 @@ const Wallet = ({
   networkInfo,
   ticker,
   openWalletModal,
-  openModal
+  openModal,
 }) => {
   if (!currentTicker || !ticker.currency) {
     return null
   }
 
   return (
-    <Box pt={3} px={5} pb={3} bg="secondaryColor">
+    <Box bg="secondaryColor" pb={3} pt={3} px={5}>
       <Flex as="header" justifyContent="space-between" pt={2}>
-        <Flex as="section" alignItems="center" mt={4}>
-          <ZapLogo width="70px" height="32px" />
+        <Flex alignItems="center" as="section" mt={4}>
+          <ZapLogo height="32px" width="70px" />
           {networkInfo.id !== 'mainnet' && (
             <Text color="superGreen" fontSize={1} ml={2}>
               {networkInfo.name}
@@ -40,9 +40,9 @@ const Wallet = ({
       <Flex as="header" justifyContent="space-between" mt={4}>
         <Box as="section">
           <Flex alignItems="center">
-            <Box onClick={openWalletModal} mr={3}>
+            <Box mr={3} onClick={openWalletModal}>
               <Button variant="secondary">
-                <Qrcode width="21px" height="21px" />
+                <Qrcode height="21px" width="21px" />
               </Button>
             </Box>
 
@@ -61,7 +61,7 @@ const Wallet = ({
           </Flex>
         </Box>
         <Box as="section">
-          <Button onClick={() => openModal('PAY_FORM')} mr={2} width={145}>
+          <Button mr={2} onClick={() => openModal('PAY_FORM')} width={145}>
             <FormattedMessage {...messages.pay} />
           </Button>
           <Button onClick={() => openModal('REQUEST_FORM')} width={145}>
@@ -75,17 +75,17 @@ const Wallet = ({
 
 Wallet.propTypes = {
   // Store props
-  totalBalance: PropTypes.number,
   currentTicker: PropTypes.object,
   networkInfo: PropTypes.shape({
     id: PropTypes.string,
-    name: PropTypes.string
+    name: PropTypes.string,
   }),
-  ticker: PropTypes.object.isRequired,
+  openModal: PropTypes.func.isRequired,
+  openWalletModal: PropTypes.func.isRequired,
 
   // Dispatch props
-  openWalletModal: PropTypes.func.isRequired,
-  openModal: PropTypes.func.isRequired
+  ticker: PropTypes.object.isRequired,
+  totalBalance: PropTypes.number,
 }
 
 export default Wallet
diff --git a/app/components/Wallet/messages.js b/app/components/Wallet/messages.js
index f36c872b2af..e4067423f14 100644
--- a/app/components/Wallet/messages.js
+++ b/app/components/Wallet/messages.js
@@ -6,5 +6,5 @@ export default defineMessages({
   request: 'Request',
   sending_tx: 'Sending your transaction…',
   payment_success: 'Successfully sent payment',
-  transaction_success: 'Successfully sent transaction'
+  transaction_success: 'Successfully sent transaction',
 })
diff --git a/app/containers/Activity.js b/app/containers/Activity.js
index 8f14f99913d..531801f9441 100644
--- a/app/containers/Activity.js
+++ b/app/containers/Activity.js
@@ -5,7 +5,7 @@ import Activity from 'components/Activity'
 
 const mapDispatchToProps = {
   showActivityModal,
-  toggleExpiredRequests
+  toggleExpiredRequests,
 }
 
 const mapStateToProps = state => ({
@@ -13,7 +13,7 @@ const mapStateToProps = state => ({
   currentActivity: activitySelectors.currentActivity(state)(state),
   currencyName: tickerSelectors.currencyName(state),
   currentTicker: tickerSelectors.currentTicker(state),
-  ticker: state.ticker
+  ticker: state.ticker,
 })
 
 export default connect(
diff --git a/app/containers/Activity/ActivityActions.js b/app/containers/Activity/ActivityActions.js
index 98ee720fc9b..b68523d57a3 100644
--- a/app/containers/Activity/ActivityActions.js
+++ b/app/containers/Activity/ActivityActions.js
@@ -5,13 +5,13 @@ import ActivityActions from 'components/Activity/ActivityActions'
 const mapDispatchToProps = {
   changeFilter,
   fetchActivityHistory,
-  updateActivitySearchQuery: updateSearchText
+  updateActivitySearchQuery: updateSearchText,
 }
 
 const mapStateToProps = state => ({
   filter: state.activity.filter,
   filters: state.activity.filters,
-  searchQuery: state.activity.searchText
+  searchQuery: state.activity.searchText,
 })
 
 export default connect(
diff --git a/app/containers/Activity/ActivityModal.js b/app/containers/Activity/ActivityModal.js
index 3c7cb255071..f0754c14599 100644
--- a/app/containers/Activity/ActivityModal.js
+++ b/app/containers/Activity/ActivityModal.js
@@ -7,12 +7,12 @@ import { ActivityModal } from 'components/Activity/ActivityModal'
 const mapStateToProps = state => ({
   item: activitySelectors.activityModalItem(state),
   network: state.info.network,
-  networkInfo: infoSelectors.networkInfo(state)
+  networkInfo: infoSelectors.networkInfo(state),
 })
 
 const mapDispatchToProps = {
   hideActivityModal,
-  showNotification
+  showNotification,
 }
 
 export default connect(
diff --git a/app/containers/Activity/Invoice.js b/app/containers/Activity/Invoice.js
index 2c6f8a027a6..b95529d35c2 100644
--- a/app/containers/Activity/Invoice.js
+++ b/app/containers/Activity/Invoice.js
@@ -5,12 +5,12 @@ import { showActivityModal } from 'reducers/activity'
 import Invoice from 'components/Activity/Invoice'
 
 const mapDispatchToProps = {
-  showActivityModal
+  showActivityModal,
 }
 
 const mapStateToProps = state => ({
   currencyName: tickerSelectors.currencyName(state),
-  nodes: state.network.nodes
+  nodes: state.network.nodes,
 })
 
 export default connect(
diff --git a/app/containers/Activity/Payment.js b/app/containers/Activity/Payment.js
index 833228d1f13..bb521caed38 100644
--- a/app/containers/Activity/Payment.js
+++ b/app/containers/Activity/Payment.js
@@ -5,12 +5,12 @@ import { showActivityModal } from 'reducers/activity'
 import Payment from 'components/Activity/Payment'
 
 const mapDispatchToProps = {
-  showActivityModal
+  showActivityModal,
 }
 
 const mapStateToProps = state => ({
   currencyName: tickerSelectors.currencyName(state),
-  nodes: state.network.nodes
+  nodes: state.network.nodes,
 })
 
 export default connect(
diff --git a/app/containers/Activity/Transaction.js b/app/containers/Activity/Transaction.js
index 8610cb4f63a..892d7c2b805 100644
--- a/app/containers/Activity/Transaction.js
+++ b/app/containers/Activity/Transaction.js
@@ -5,12 +5,12 @@ import { showActivityModal } from 'reducers/activity'
 import Transaction from 'components/Activity/Transaction'
 
 const mapDispatchToProps = {
-  showActivityModal
+  showActivityModal,
 }
 
 const mapStateToProps = state => ({
   currencyName: tickerSelectors.currencyName(state),
-  nodes: state.network.nodes
+  nodes: state.network.nodes,
 })
 
 export default connect(
diff --git a/app/containers/App.js b/app/containers/App.js
index 8b0a4bfca7e..39bd1480cb1 100644
--- a/app/containers/App.js
+++ b/app/containers/App.js
@@ -9,7 +9,7 @@ const mapDispatchToProps = {
   fetchPeers,
   fetchActivityHistory,
   setIsWalletOpen,
-  fetchTransactions
+  fetchTransactions,
 }
 
 export default connect(
diff --git a/app/containers/Channels.js b/app/containers/Channels.js
index f048b747c68..f6f3bccbeec 100644
--- a/app/containers/Channels.js
+++ b/app/containers/Channels.js
@@ -7,7 +7,7 @@ import {
   showCloseChannelDialog,
   setSelectedChannel,
   setChannelViewMode,
-  updateChannelSearchQuery
+  updateChannelSearchQuery,
 } from 'reducers/channels'
 import { infoSelectors } from 'reducers/info'
 import { tickerSelectors } from 'reducers/ticker'
@@ -22,7 +22,7 @@ const mapStateToProps = state => ({
   filters: state.channels.filters,
   networkInfo: infoSelectors.networkInfo(state),
   searchQuery: state.channels.searchQuery,
-  selectedChannel: channelsSelectors.selectedChannel(state)
+  selectedChannel: channelsSelectors.selectedChannel(state),
 })
 
 const mapDispatchToProps = {
@@ -31,7 +31,7 @@ const mapDispatchToProps = {
   setSelectedChannel,
   setChannelViewMode,
   openModal,
-  updateChannelSearchQuery
+  updateChannelSearchQuery,
 }
 
 export default connect(
diff --git a/app/containers/Channels/ChannelCloseDialog.js b/app/containers/Channels/ChannelCloseDialog.js
index 76314465d15..efa3539c1e3 100644
--- a/app/containers/Channels/ChannelCloseDialog.js
+++ b/app/containers/Channels/ChannelCloseDialog.js
@@ -19,7 +19,7 @@ const mapStateToProps = state => {
   return {
     isOpen,
     isForceClose: isForceCloseDialog(state),
-    csvDelay: csvDelay(state)
+    csvDelay: csvDelay(state),
   }
 }
 
@@ -32,7 +32,7 @@ const mapDispatchToProps = dispatch => ({
 
   onCancel() {
     dispatch(hideCloseChannelDialog())
-  }
+  },
 })
 
 export default connect(
diff --git a/app/containers/Channels/ChannelCreate.js b/app/containers/Channels/ChannelCreate.js
index 01ebe457755..990fdd3409c 100644
--- a/app/containers/Channels/ChannelCreate.js
+++ b/app/containers/Channels/ChannelCreate.js
@@ -4,11 +4,11 @@ import { updateContactFormSearchQuery, contactFormSelectors } from 'reducers/con
 
 const mapStateToProps = state => ({
   searchQuery: state.contactsform.searchQuery,
-  isSearchValidNodeAddress: contactFormSelectors.isSearchValidNodeAddress(state)
+  isSearchValidNodeAddress: contactFormSelectors.isSearchValidNodeAddress(state),
 })
 
 const mapDispatchToProps = {
-  updateContactFormSearchQuery
+  updateContactFormSearchQuery,
 }
 
 export default connect(
diff --git a/app/containers/Channels/ChannelCreateForm.js b/app/containers/Channels/ChannelCreateForm.js
index 432b23fed18..b7ce34e3b00 100644
--- a/app/containers/Channels/ChannelCreateForm.js
+++ b/app/containers/Channels/ChannelCreateForm.js
@@ -16,14 +16,14 @@ const mapStateToProps = state => ({
   walletBalance: balanceSelectors.walletBalanceConfirmed(state),
   currencyName: tickerSelectors.currencyName(state),
   isQueryingFees: state.pay.isQueryingFees,
-  onchainFees: state.pay.onchainFees
+  onchainFees: state.pay.onchainFees,
 })
 
 const mapDispatchToProps = {
   openChannel,
   queryFees,
   updateContactFormSearchQuery,
-  showNotification
+  showNotification,
 }
 
 export default connect(
diff --git a/app/containers/Channels/ChannelDetail.js b/app/containers/Channels/ChannelDetail.js
index 4ddbdde70a7..0da50989c9b 100644
--- a/app/containers/Channels/ChannelDetail.js
+++ b/app/containers/Channels/ChannelDetail.js
@@ -7,12 +7,12 @@ import { tickerSelectors } from 'reducers/ticker'
 const mapStateToProps = state => ({
   currencyName: tickerSelectors.currencyName(state),
   networkInfo: infoSelectors.networkInfo(state),
-  channel: channelsSelectors.selectedChannel(state)
+  channel: channelsSelectors.selectedChannel(state),
 })
 
 const mapDispatchToProps = {
   closeChannel: showCloseChannelDialog,
-  setSelectedChannel
+  setSelectedChannel,
 }
 
 export default connect(
diff --git a/app/containers/Channels/ChannelNodeSearch.js b/app/containers/Channels/ChannelNodeSearch.js
index e1c741ae71b..f262e93aed4 100644
--- a/app/containers/Channels/ChannelNodeSearch.js
+++ b/app/containers/Channels/ChannelNodeSearch.js
@@ -4,11 +4,11 @@ import { updateContactFormSearchQuery, contactFormSelectors } from 'reducers/con
 
 const mapStateToProps = state => ({
   searchQuery: state.contactsform.searchQuery,
-  filteredNetworkNodes: contactFormSelectors.filteredNetworkNodes(state)
+  filteredNetworkNodes: contactFormSelectors.filteredNetworkNodes(state),
 })
 
 const mapDispatchToProps = {
-  updateContactFormSearchQuery
+  updateContactFormSearchQuery,
 }
 
 export default connect(
diff --git a/app/containers/Channels/NodeCardList.js b/app/containers/Channels/NodeCardList.js
index 2d5b70e3500..1e0ae152ac1 100644
--- a/app/containers/Channels/NodeCardList.js
+++ b/app/containers/Channels/NodeCardList.js
@@ -3,11 +3,11 @@ import { updateContactFormSearchQuery, contactFormSelectors } from 'reducers/con
 import NodeCardList from 'components/Channels/NodeCardList'
 
 const mapStateToProps = state => ({
-  nodes: contactFormSelectors.suggestedNodes(state)
+  nodes: contactFormSelectors.suggestedNodes(state),
 })
 
 const mapDispatchToProps = {
-  updateContactFormSearchQuery
+  updateContactFormSearchQuery,
 }
 
 export default connect(
diff --git a/app/containers/Home.js b/app/containers/Home.js
index 9f6fefa36ba..b0bef1731dd 100644
--- a/app/containers/Home.js
+++ b/app/containers/Home.js
@@ -5,7 +5,7 @@ import {
   walletSelectors,
   showDeleteWalletDialog,
   setIsWalletOpen,
-  putWallet
+  putWallet,
 } from 'reducers/wallet'
 import {
   setUnlockWalletError,
@@ -13,7 +13,7 @@ import {
   startLnd,
   unlockWallet,
   refreshLndConnectURI,
-  clearStartLndError
+  clearStartLndError,
 } from 'reducers/lnd'
 import { showError, showNotification } from 'reducers/notification'
 import Home from 'components/Home'
@@ -31,12 +31,12 @@ const mapStateToProps = state => ({
   wallets: state.wallet.wallets,
   activeWallet: walletSelectors.activeWallet(state),
   activeWalletSettings: walletSelectors.activeWalletSettings(state),
-  lightningGrpcActive: state.lnd.lightningGrpcActive,
-  walletUnlockerGrpcActive: state.lnd.walletUnlockerGrpcActive,
+  isLightningGrpcActive: state.lnd.isLightningGrpcActive,
+  isWalletUnlockerGrpcActive: state.lnd.isWalletUnlockerGrpcActive,
   startLndError: state.lnd.startLndError,
-  startingLnd: state.lnd.startingLnd,
-  unlockingWallet: state.lnd.unlockingWallet,
-  unlockWalletError: state.lnd.unlockWalletError
+  isStartingLnd: state.lnd.isStartingLnd,
+  isUnlockingWallet: state.lnd.isUnlockingWallet,
+  unlockWalletError: state.lnd.unlockWalletError,
 })
 
 const mapDispatchToProps = {
@@ -51,7 +51,7 @@ const mapDispatchToProps = {
   deleteWallet: showDeleteWalletDialog,
   setIsWalletOpen,
   showError,
-  refreshLndConnectURI
+  refreshLndConnectURI,
 }
 
 export default connect(
diff --git a/app/containers/Home/DeleteWalletDialog.js b/app/containers/Home/DeleteWalletDialog.js
index 29039e2b8d6..0da252aff67 100644
--- a/app/containers/Home/DeleteWalletDialog.js
+++ b/app/containers/Home/DeleteWalletDialog.js
@@ -7,7 +7,7 @@ const mapStateToProps = state => {
   const isOpen = Boolean(state.wallet.isDeleteDialogOpen)
   return {
     isOpen,
-    walletDir: isOpen ? walletSelectors.activeWalletDir(state) : ''
+    walletDir: isOpen ? walletSelectors.activeWalletDir(state) : '',
   }
 }
 
@@ -18,7 +18,7 @@ const mapDispatchToProps = dispatch => ({
 
   onCancel() {
     dispatch(hideDeleteWalletDialog())
-  }
+  },
 })
 
 export default connect(
diff --git a/app/containers/Initializer.js b/app/containers/Initializer.js
index a43e6f27c02..718834588b5 100644
--- a/app/containers/Initializer.js
+++ b/app/containers/Initializer.js
@@ -16,16 +16,16 @@ class Initializer extends React.Component {
   static propTypes = {
     activeWallet: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     activeWalletSettings: PropTypes.object,
-    hasWallets: PropTypes.bool,
-    isWalletOpen: PropTypes.bool,
-    isReady: PropTypes.bool.isRequired,
-    lndConnect: PropTypes.string,
     fetchSuggestedNodes: PropTypes.func.isRequired,
-    initTickers: PropTypes.func.isRequired,
-    initLocale: PropTypes.func.isRequired,
+    hasWallets: PropTypes.bool,
+    initChannels: PropTypes.func.isRequired,
     initCurrency: PropTypes.func.isRequired,
+    initLocale: PropTypes.func.isRequired,
+    initTickers: PropTypes.func.isRequired,
     initWallets: PropTypes.func.isRequired,
-    initChannels: PropTypes.func.isRequired
+    isReady: PropTypes.bool.isRequired,
+    isWalletOpen: PropTypes.bool,
+    lndConnect: PropTypes.string,
   }
 
   /**
@@ -38,7 +38,7 @@ class Initializer extends React.Component {
       initLocale,
       initCurrency,
       initWallets,
-      initChannels
+      initChannels,
     } = this.props
     initTickers()
     initLocale()
@@ -59,7 +59,7 @@ class Initializer extends React.Component {
       isReady,
       isWalletOpen,
       hasWallets,
-      lndConnect
+      lndConnect,
     } = this.props
 
     // still initializing - no location change
@@ -95,7 +95,7 @@ const mapStateToProps = state => ({
   activeWalletSettings: walletSelectors.activeWalletSettings(state),
   hasWallets: walletSelectors.hasWallets(state),
   isWalletOpen: walletSelectors.isWalletOpen(state),
-  isReady: appSelectors.isReady(state)
+  isReady: appSelectors.isReady(state),
 })
 
 const mapDispatchToProps = {
@@ -105,7 +105,7 @@ const mapDispatchToProps = {
   initCurrency,
   initLocale,
   initWallets,
-  initChannels
+  initChannels,
 }
 
 export default connect(
diff --git a/app/containers/Logout.js b/app/containers/Logout.js
index d47382687a7..0e084200321 100644
--- a/app/containers/Logout.js
+++ b/app/containers/Logout.js
@@ -21,14 +21,14 @@ Logout.propTypes = {
   resetApp: PropTypes.func.isRequired,
   setIsWalletOpen: PropTypes.func.isRequired,
   startOnboarding: PropTypes.func.isRequired,
-  stopLnd: PropTypes.func.isRequired
+  stopLnd: PropTypes.func.isRequired,
 }
 
 const mapDispatchToProps = {
   resetApp,
   stopLnd,
   setIsWalletOpen,
-  startOnboarding
+  startOnboarding,
 }
 
 export default connect(
diff --git a/app/containers/ModalStack.js b/app/containers/ModalStack.js
index 8dbc803ed29..34e779a24bf 100644
--- a/app/containers/ModalStack.js
+++ b/app/containers/ModalStack.js
@@ -22,16 +22,16 @@ const Container = styled(animated.div)`
 const ModalContent = ({ type, closeModal }) => {
   switch (type) {
     case 'PAY_FORM':
-      return <Pay width={9 / 16} mx="auto" />
+      return <Pay mx="auto" width={9 / 16} />
 
     case 'REQUEST_FORM':
-      return <Request width={9 / 16} mx="auto" />
+      return <Request mx="auto" width={9 / 16} />
 
     case 'RECEIVE_MODAL':
-      return <ReceiveModal width={9 / 16} mx="auto" />
+      return <ReceiveModal mx="auto" width={9 / 16} />
 
     case 'ACTIVITY_MODAL':
-      return <ActivityModal width={9 / 16} mx="auto" />
+      return <ActivityModal mx="auto" width={9 / 16} />
 
     case 'CHANNELS':
       return <Channels mx={-4} />
@@ -50,8 +50,8 @@ const ModalContent = ({ type, closeModal }) => {
 }
 
 ModalContent.propTypes = {
+  closeModal: PropTypes.func.isRequired,
   type: PropTypes.string.isRequired,
-  closeModal: PropTypes.func.isRequired
 }
 
 function ModalStack(props) {
@@ -61,10 +61,10 @@ function ModalStack(props) {
 
   return (
     <Transition
+      enter={{ opacity: 1, pointerEvents: 'auto' }}
+      from={{ opacity: 0, pointerEvents: 'auto' }}
       items={modals}
       keys={item => item.id}
-      from={{ opacity: 0, pointerEvents: 'auto' }}
-      enter={{ opacity: 1, pointerEvents: 'auto' }}
       leave={{ opacity: 0, pointerEvents: 'none' }}
     >
       {modal =>
@@ -73,7 +73,7 @@ function ModalStack(props) {
         (styles => (
           <Container style={styles}>
             <Modal onClose={() => closeModal(modal.id)}>
-              <ModalContent type={modal.type} closeModal={closeModal} />
+              <ModalContent closeModal={closeModal} type={modal.type} />
             </Modal>
           </Container>
         ))
@@ -83,16 +83,16 @@ function ModalStack(props) {
 }
 
 ModalStack.propTypes = {
+  closeModal: PropTypes.func.isRequired,
   modals: PropTypes.array.isRequired,
-  closeModal: PropTypes.func.isRequired
 }
 
 const mapStateToProps = state => ({
-  modals: modalSelectors.getModalState(state)
+  modals: modalSelectors.getModalState(state),
 })
 
 const mapDispatchToProps = {
-  closeModal
+  closeModal,
 }
 
 export default connect(
diff --git a/app/containers/Onboarding.js b/app/containers/Onboarding.js
index 176dd729c08..36461cafaeb 100644
--- a/app/containers/Onboarding.js
+++ b/app/containers/Onboarding.js
@@ -20,7 +20,7 @@ import {
   validateHost,
   validateCert,
   validateMacaroon,
-  resetOnboarding
+  resetOnboarding,
 } from 'reducers/onboarding'
 import {
   setUnlockWalletError,
@@ -32,7 +32,7 @@ import {
   recoverOldWallet,
   clearStartLndError,
   unlockWallet,
-  lndSelectors
+  lndSelectors,
 } from 'reducers/lnd'
 
 const mapStateToProps = state => ({
@@ -45,15 +45,15 @@ const mapStateToProps = state => ({
   connectionMacaroon: state.onboarding.connectionMacaroon,
   connectionString: state.onboarding.connectionString,
   lndConnect: state.onboarding.lndConnect,
-  lightningGrpcActive: state.lnd.lightningGrpcActive,
-  walletUnlockerGrpcActive: state.lnd.walletUnlockerGrpcActive,
+  isLightningGrpcActive: state.lnd.isLightningGrpcActive,
+  isWalletUnlockerGrpcActive: state.lnd.isWalletUnlockerGrpcActive,
   startLndHostError: lndSelectors.startLndHostError(state),
   startLndCertError: lndSelectors.startLndCertError(state),
   startLndMacaroonError: lndSelectors.startLndMacaroonError(state),
   seed: state.onboarding.seed,
   unlockWalletError: state.lnd.unlockWalletError,
-  onboarded: state.onboarding.onboarded,
-  fetchingSeed: state.lnd.fetchingSeed
+  isOnboarded: state.onboarding.isOnboarded,
+  isFetchingSeed: state.lnd.isFetchingSeed,
 })
 
 const mapDispatchToProps = {
@@ -80,7 +80,7 @@ const mapDispatchToProps = {
   createNewWallet,
   recoverOldWallet,
   resetOnboarding,
-  unlockWallet
+  unlockWallet,
 }
 
 const OnboardingContainer = connect(
@@ -95,7 +95,7 @@ function OnboardingModal({ hasWallets, onClose }) {
   useOnKeydown('Escape', onClose)
   return (
     <ModalOverlay>
-      <Modal withClose={hasWallets} onClose={onClose} pt={hasWallets ? 0 : 4}>
+      <Modal hasClose={hasWallets} onClose={onClose} pt={hasWallets ? 0 : 4}>
         <OnboardingContainer />
       </Modal>
     </ModalOverlay>
@@ -104,7 +104,7 @@ function OnboardingModal({ hasWallets, onClose }) {
 
 OnboardingModal.propTypes = {
   hasWallets: PropTypes.bool.isRequired,
-  onClose: PropTypes.func.isRequired
+  onClose: PropTypes.func.isRequired,
 }
 
 export default OnboardingModal
diff --git a/app/containers/Pay.js b/app/containers/Pay.js
index 23772143699..40f3c72ed71 100644
--- a/app/containers/Pay.js
+++ b/app/containers/Pay.js
@@ -17,7 +17,7 @@ const mapStateToProps = state => ({
   payReq: state.pay.payReq,
   onchainFees: state.pay.onchainFees,
   routes: state.pay.routes,
-  walletBalance: state.balance.walletBalance
+  walletBalance: state.balance.walletBalance,
 })
 
 const mapDispatchToProps = {
@@ -26,7 +26,7 @@ const mapDispatchToProps = {
   payInvoice,
   setPayReq,
   sendCoins,
-  queryRoutes
+  queryRoutes,
 }
 
 export default connect(
diff --git a/app/containers/Pay/PaySummaryLightning.js b/app/containers/Pay/PaySummaryLightning.js
index 487794fd7ad..7809125cdb3 100644
--- a/app/containers/Pay/PaySummaryLightning.js
+++ b/app/containers/Pay/PaySummaryLightning.js
@@ -5,7 +5,7 @@ import { tickerSelectors } from 'reducers/ticker'
 const mapStateToProps = state => ({
   cryptoCurrencyTicker: tickerSelectors.currencyName(state),
   isQueryingRoutes: state.pay.isQueryingRoutes,
-  nodes: state.network.nodes
+  nodes: state.network.nodes,
 })
 
 export default connect(mapStateToProps)(PaySummaryLightning)
diff --git a/app/containers/Pay/PaySummaryOnChain.js b/app/containers/Pay/PaySummaryOnChain.js
index 40dda71ae09..e5200374d01 100644
--- a/app/containers/Pay/PaySummaryOnChain.js
+++ b/app/containers/Pay/PaySummaryOnChain.js
@@ -7,11 +7,11 @@ const mapStateToProps = state => ({
   cryptoCurrencyTicker: tickerSelectors.currencyName(state),
   isQueryingFees: state.pay.isQueryingFees,
   nodes: state.network.nodes,
-  onchainFees: state.pay.onchainFees
+  onchainFees: state.pay.onchainFees,
 })
 
 const mapDispatchToProps = {
-  queryFees
+  queryFees,
 }
 
 export default connect(
diff --git a/app/containers/Request.js b/app/containers/Request.js
index 47c690d3706..14e8cee37a7 100644
--- a/app/containers/Request.js
+++ b/app/containers/Request.js
@@ -10,12 +10,12 @@ const mapStateToProps = state => ({
   cryptoCurrencyTicker: tickerSelectors.currencyName(state),
   isProcessing: state.invoice.invoiceLoading,
   payReq: state.invoice.invoice,
-  invoice: invoiceSelectors.invoice(state)
+  invoice: invoiceSelectors.invoice(state),
 })
 
 const mapDispatchToProps = {
   createInvoice,
-  showNotification
+  showNotification,
 }
 
 export default connect(
diff --git a/app/containers/Root.js b/app/containers/Root.js
index bb5583e89c5..97db162c5ba 100644
--- a/app/containers/Root.js
+++ b/app/containers/Root.js
@@ -34,17 +34,17 @@ const PageWithLoading = withLoading(Page)
 class Root extends React.Component {
   static propTypes = {
     hasWallets: PropTypes.bool,
-    removeNotification: PropTypes.func.isRequired,
-    theme: PropTypes.object,
-    loadingMessage: PropTypes.object,
-    notifications: PropTypes.array.isRequired,
     history: PropTypes.object.isRequired,
-    isLoading: PropTypes.bool.isRequired,
-
     initSettings: PropTypes.func.isRequired,
     initTheme: PropTypes.func.isRequired,
+    isLoading: PropTypes.bool.isRequired,
     isMounted: PropTypes.bool.isRequired,
-    setMounted: PropTypes.func.isRequired
+    loadingMessage: PropTypes.object,
+
+    notifications: PropTypes.array.isRequired,
+    removeNotification: PropTypes.func.isRequired,
+    setMounted: PropTypes.func.isRequired,
+    theme: PropTypes.object,
   }
 
   async componentDidMount() {
@@ -76,7 +76,7 @@ class Root extends React.Component {
       notifications,
       history,
       isLoading,
-      loadingMessage
+      loadingMessage,
     } = this.props
 
     // Wait until we have loaded essential data before displaying anything.
@@ -97,9 +97,9 @@ class Root extends React.Component {
             <ModalStack />
             <PageWithLoading isLoading={isLoading} loadingMessage={loadingMessage}>
               <Switch>
-                <Route exact path="/" component={Initializer} />
-                <Route exact path="/wallet-starter" component={WalletStarter} />
-                <Route path="/home" component={Home} />
+                <Route component={Initializer} exact path="/" />
+                <Route component={WalletStarter} exact path="/wallet-starter" />
+                <Route component={Home} path="/home" />
                 <Route
                   exact
                   path="/onboarding"
@@ -112,8 +112,8 @@ class Root extends React.Component {
                   path="/syncing"
                   render={() => <Syncing onClose={this.redirectToLogout} pb={0} px={0} />}
                 />
-                <Route path="/app" component={App} />
-                <Route path="/logout" component={Logout} />
+                <Route component={App} path="/app" />
+                <Route component={Logout} path="/logout" />
               </Switch>
             </PageWithLoading>
           </React.Fragment>
@@ -129,7 +129,7 @@ const mapStateToProps = state => ({
   theme: themeSelectors.currentThemeSettings(state),
   isLoading: isLoading(state) || isLoadingPerPath(state),
   loadingMessage: getLoadingMessage(state),
-  isMounted: appSelectors.isMounted(state)
+  isMounted: appSelectors.isMounted(state),
 })
 
 const mapDispatchToProps = {
@@ -137,7 +137,7 @@ const mapDispatchToProps = {
   initSettings,
   initTheme,
   setLoading,
-  setMounted
+  setMounted,
 }
 
 export default hot(
diff --git a/app/containers/Settings.js b/app/containers/Settings.js
index b3a59359fd2..9268bee3971 100644
--- a/app/containers/Settings.js
+++ b/app/containers/Settings.js
@@ -5,7 +5,7 @@ import {
   openSettings,
   closeSettings,
   setActiveSubMenu,
-  disableSubMenu
+  disableSubMenu,
 } from 'reducers/settingsmenu'
 import { setTheme } from 'reducers/theme'
 import { openModal } from 'reducers/modal'
@@ -22,7 +22,7 @@ const mapStateToProps = state => ({
   currentLocale: state.intl.locale,
   themes: state.theme.themes,
   currentTheme: state.theme.currentTheme,
-  isSettingsOpen: state.settingsmenu.isSettingsOpen
+  isSettingsOpen: state.settingsmenu.isSettingsOpen,
 })
 
 const mapDispatchToProps = {
@@ -33,7 +33,7 @@ const mapDispatchToProps = {
   disableSubMenu,
   setFiatTicker,
   setLocale,
-  setTheme
+  setTheme,
 }
 
 const mergeProps = (stateProps, dispatchProps) => ({
@@ -49,22 +49,22 @@ const mergeProps = (stateProps, dispatchProps) => ({
     fiatTicker: stateProps.fiatTicker,
     fiatTickers: stateProps.fiatTickers,
     disableSubMenu: dispatchProps.disableSubMenu,
-    setFiatTicker: dispatchProps.setFiatTicker
+    setFiatTicker: dispatchProps.setFiatTicker,
   },
 
   localeProps: {
     locales: stateProps.locales,
     currentLocale: stateProps.currentLocale,
     disableSubMenu: dispatchProps.disableSubMenu,
-    setLocale: dispatchProps.setLocale
+    setLocale: dispatchProps.setLocale,
   },
 
   themeProps: {
     themes: stateProps.themes,
     currentTheme: stateProps.currentTheme,
     disableSubMenu: dispatchProps.disableSubMenu,
-    setTheme: dispatchProps.setTheme
-  }
+    setTheme: dispatchProps.setTheme,
+  },
 })
 
 export default connect(
diff --git a/app/containers/Syncing.js b/app/containers/Syncing.js
index 5d66f6b5289..bb14c7db9b2 100644
--- a/app/containers/Syncing.js
+++ b/app/containers/Syncing.js
@@ -18,12 +18,12 @@ const mapStateToProps = state => ({
   blockHeight: state.lnd.blockHeight,
   lndBlockHeight: state.lnd.lndBlockHeight,
   lndCfilterHeight: state.lnd.lndCfilterHeight,
-  lightningGrpcActive: state.lnd.lightningGrpcActive
+  isLightningGrpcActive: state.lnd.isLightningGrpcActive,
 })
 
 const mapDispatchToProps = {
   setIsWalletOpen,
-  showNotification
+  showNotification,
 }
 
 const SyncingContainer = connect(
@@ -39,7 +39,7 @@ function SyncingModal({ onClose, ...rest }) {
   useOnKeydown('Escape', onClose)
   return (
     <ModalOverlay>
-      <Modal withClose onClose={onClose} {...rest}>
+      <Modal hasClose onClose={onClose} {...rest}>
         <SyncingContainer />
       </Modal>
     </ModalOverlay>
@@ -47,7 +47,7 @@ function SyncingModal({ onClose, ...rest }) {
 }
 
 SyncingModal.propTypes = {
-  onClose: PropTypes.func.isRequired
+  onClose: PropTypes.func.isRequired,
 }
 
 export default SyncingModal
diff --git a/app/containers/UI/CryptoSelector.js b/app/containers/UI/CryptoSelector.js
index 0fbab165d2e..58648af7032 100644
--- a/app/containers/UI/CryptoSelector.js
+++ b/app/containers/UI/CryptoSelector.js
@@ -4,11 +4,11 @@ import { tickerSelectors, setCurrency } from 'reducers/ticker'
 
 const mapStateToProps = state => ({
   activeKey: state.ticker.currency,
-  items: tickerSelectors.currencyFilters(state)
+  items: tickerSelectors.currencyFilters(state),
 })
 
 const mapDispatchToProps = {
-  onChange: setCurrency
+  onChange: setCurrency,
 }
 
 export default connect(
diff --git a/app/containers/UI/CryptoValue.js b/app/containers/UI/CryptoValue.js
index 6895f41b2fb..87f5eb1499a 100644
--- a/app/containers/UI/CryptoValue.js
+++ b/app/containers/UI/CryptoValue.js
@@ -4,7 +4,7 @@ import { connect } from 'react-redux'
 import { Span, Value } from 'components/UI'
 
 const mapStateToProps = state => ({
-  currency: state.ticker.currency
+  currency: state.ticker.currency,
 })
 
 const ConnectedValue = connect(mapStateToProps)(Value)
@@ -18,7 +18,7 @@ const CryptoValue = ({ value, ...rest }) => {
 }
 
 CryptoValue.propTypes = {
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 }
 
 export default CryptoValue
diff --git a/app/containers/UI/CurrencyFieldGroup.js b/app/containers/UI/CurrencyFieldGroup.js
index 02531d0dc6f..037b7b6206f 100644
--- a/app/containers/UI/CurrencyFieldGroup.js
+++ b/app/containers/UI/CurrencyFieldGroup.js
@@ -7,12 +7,12 @@ const mapStateToProps = state => ({
   cryptoCurrency: state.ticker.currency,
   cryptoCurrencies: tickerSelectors.currencyFilters(state),
   fiatCurrencies: state.ticker.fiatTickers,
-  fiatCurrency: state.ticker.fiatTicker
+  fiatCurrency: state.ticker.fiatTicker,
 })
 
 const mapDispatchToProps = {
   setCryptoCurrency: setCurrency,
-  setFiatCurrency: setFiatTicker
+  setFiatCurrency: setFiatTicker,
 }
 
 export default connect(
diff --git a/app/containers/UI/FiatSelector.js b/app/containers/UI/FiatSelector.js
index a5f2bda54cb..2a8e51090d0 100644
--- a/app/containers/UI/FiatSelector.js
+++ b/app/containers/UI/FiatSelector.js
@@ -4,11 +4,11 @@ import { setFiatTicker } from 'reducers/ticker'
 
 const mapStateToProps = state => ({
   activeKey: state.ticker.fiatTicker,
-  items: state.ticker.fiatTickers
+  items: state.ticker.fiatTickers,
 })
 
 const mapDispatchToProps = {
-  onChange: setFiatTicker
+  onChange: setFiatTicker,
 }
 
 export default connect(
diff --git a/app/containers/UI/FiatValue.js b/app/containers/UI/FiatValue.js
index 23a3312a254..95abe699571 100644
--- a/app/containers/UI/FiatValue.js
+++ b/app/containers/UI/FiatValue.js
@@ -7,7 +7,7 @@ import { Span, Value } from 'components/UI'
 const mapStateToProps = state => ({
   currentTicker: tickerSelectors.currentTicker(state),
   fiatTicker: state.ticker.fiatTicker,
-  currency: 'fiat'
+  currency: 'fiat',
 })
 
 const ConnectedValue = connect(mapStateToProps)(Value)
@@ -15,14 +15,14 @@ const ConnectedValue = connect(mapStateToProps)(Value)
 const FiatValue = ({ value, style, ...rest }) => {
   return (
     <Span {...rest}>
-      <ConnectedValue value={value} style={style} />
+      <ConnectedValue style={style} value={value} />
     </Span>
   )
 }
 
 FiatValue.propTypes = {
   style: PropTypes.oneOf(['decimal', 'currency']),
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 }
 
 export default FiatValue
diff --git a/app/containers/Wallet.js b/app/containers/Wallet.js
index cb03959f826..0ad86917cce 100644
--- a/app/containers/Wallet.js
+++ b/app/containers/Wallet.js
@@ -8,14 +8,14 @@ import Wallet from 'components/Wallet'
 
 const mapDispatchToProps = {
   openWalletModal,
-  openModal
+  openModal,
 }
 
 const mapStateToProps = state => ({
   networkInfo: infoSelectors.networkInfo(state),
   ticker: state.ticker,
   totalBalance: balanceSelectors.totalBalance(state),
-  currentTicker: tickerSelectors.currentTicker(state)
+  currentTicker: tickerSelectors.currentTicker(state),
 })
 
 export default connect(
diff --git a/app/containers/Wallet/ReceiveModal.js b/app/containers/Wallet/ReceiveModal.js
index 51c49529bd0..1d2de11e5d8 100644
--- a/app/containers/Wallet/ReceiveModal.js
+++ b/app/containers/Wallet/ReceiveModal.js
@@ -13,12 +13,12 @@ const mapStateToProps = state => ({
   pubkey: get(state.info, 'data.uris[0]') || get(state.info, 'data.identity_pubkey'),
   address: state.address.address,
   activeWalletSettings: walletSelectors.activeWalletSettings(state),
-  alias: state.info.data.alias
+  alias: state.info.data.alias,
 })
 
 const mapDispatchToProps = {
   onClose: closeWalletModal,
-  showNotification
+  showNotification,
 }
 
 export default connect(
diff --git a/app/containers/WalletStarter.js b/app/containers/WalletStarter.js
index 731e3dd1e46..c18f0c51d2b 100644
--- a/app/containers/WalletStarter.js
+++ b/app/containers/WalletStarter.js
@@ -13,10 +13,10 @@ class WalletStarter extends Component {
   static propTypes = {
     activeWallet: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     activeWalletSettings: PropTypes.object,
+    isLightningGrpcActive: PropTypes.bool,
+    isWalletUnlockerGrpcActive: PropTypes.bool,
+    startActiveWallet: PropTypes.func.isRequired,
     startLndError: PropTypes.object,
-    lightningGrpcActive: PropTypes.bool,
-    walletUnlockerGrpcActive: PropTypes.bool,
-    startActiveWallet: PropTypes.func.isRequired
   }
 
   componentDidMount() {
@@ -30,9 +30,9 @@ class WalletStarter extends Component {
     const {
       activeWallet,
       activeWalletSettings,
-      lightningGrpcActive,
+      isLightningGrpcActive,
       startLndError,
-      walletUnlockerGrpcActive
+      isWalletUnlockerGrpcActive,
     } = this.props
 
     // If there was a problem starting lnd, switch to the wallet launcher.
@@ -41,12 +41,12 @@ class WalletStarter extends Component {
     }
 
     // If the wallet unlocker became active, switch to the login screen.
-    if (walletUnlockerGrpcActive) {
+    if (isWalletUnlockerGrpcActive) {
       return `/home/wallet/${activeWallet}/unlock`
     }
 
     // If an active wallet connection has been established, switch to the app.
-    if (lightningGrpcActive) {
+    if (isLightningGrpcActive) {
       return activeWalletSettings.type === 'local' ? '/syncing' : '/app'
     }
 
@@ -64,13 +64,13 @@ const mapStateToProps = state => ({
   activeWallet: walletSelectors.activeWallet(state),
   activeWalletSettings: walletSelectors.activeWalletSettings(state),
   hasWallets: walletSelectors.hasWallets(state),
-  lightningGrpcActive: state.lnd.lightningGrpcActive,
-  walletUnlockerGrpcActive: state.lnd.walletUnlockerGrpcActive,
-  startLndError: state.lnd.startLndError
+  isLightningGrpcActive: state.lnd.isLightningGrpcActive,
+  isWalletUnlockerGrpcActive: state.lnd.isWalletUnlockerGrpcActive,
+  startLndError: state.lnd.startLndError,
 })
 
 const mapDispatchToProps = {
-  startActiveWallet
+  startActiveWallet,
 }
 
 export default connect(
diff --git a/app/hocs/withEllipsis.js b/app/hocs/withEllipsis.js
index 460dba83e0f..d3f5f38a00e 100644
--- a/app/hocs/withEllipsis.js
+++ b/app/hocs/withEllipsis.js
@@ -17,7 +17,7 @@ const withEllipsis = Component => {
     static displayName = 'withEllipsis'
 
     static propTypes = {
-      children: PropTypes.node
+      children: PropTypes.node,
     }
 
     render() {
diff --git a/app/hocs/withLoading.js b/app/hocs/withLoading.js
index 9ae66cf6062..d7878f7236a 100644
--- a/app/hocs/withLoading.js
+++ b/app/hocs/withLoading.js
@@ -13,7 +13,7 @@ const withLoading = Component =>
     static propTypes = {
       children: PropTypes.node,
       isLoading: PropTypes.bool.isRequired,
-      loadingMessage: PropTypes.object
+      loadingMessage: PropTypes.object,
     }
 
     /**
diff --git a/app/hocs/withNumberInputMask.js b/app/hocs/withNumberInputMask.js
index bfafdecdcb6..6b02901b0b8 100644
--- a/app/hocs/withNumberInputMask.js
+++ b/app/hocs/withNumberInputMask.js
@@ -12,7 +12,7 @@ const withNumberInputMask = Component =>
 
     static propTypes = {
       fieldApi: PropTypes.object.isRequired,
-      onKeyDown: PropTypes.func
+      onKeyDown: PropTypes.func,
     }
 
     handleKeyDown = e => {
diff --git a/app/hocs/withOpenDialog.js b/app/hocs/withOpenDialog.js
index 8305d966998..c246820be74 100644
--- a/app/hocs/withOpenDialog.js
+++ b/app/hocs/withOpenDialog.js
@@ -8,7 +8,7 @@
  */
 function openDialog(mode = 'openFile') {
   const result = window.showOpenDialog({
-    properties: [mode]
+    properties: [mode],
   })
 
   if (result && result.length) {
diff --git a/app/hocs/withRequiredValidation.js b/app/hocs/withRequiredValidation.js
index da1df423e9e..2a06ff549d2 100644
--- a/app/hocs/withRequiredValidation.js
+++ b/app/hocs/withRequiredValidation.js
@@ -12,23 +12,23 @@ const withRequiredValidation = Component =>
     static displayName = `WithRequiredValidation(${getDisplayName(Component)})`
 
     static propTypes = {
-      disabled: PropTypes.bool,
-      required: PropTypes.bool,
-      validate: PropTypes.func
+      isDisabled: PropTypes.bool,
+      isRequired: PropTypes.bool,
+      validate: PropTypes.func,
     }
 
     static defaultProps = {
-      disabled: false,
-      required: false
+      isDisabled: false,
+      isRequired: false,
     }
 
     validate = value => {
-      const { disabled, required } = this.props
-      if (disabled) {
+      const { isDisabled, isRequired } = this.props
+      if (isDisabled) {
         return
       }
       try {
-        if (required) {
+        if (isRequired) {
           const validator = yup.string().required()
           validator.validateSync(value)
         }
diff --git a/app/index.js b/app/index.js
index 470093aedd2..4e8f359730c 100644
--- a/app/index.js
+++ b/app/index.js
@@ -28,8 +28,8 @@ const initialState = {
   intl: {
     locale: defaultLocale,
     messages: translations[defaultLocale],
-    timeZone: jstz.determine().name()
-  }
+    timeZone: jstz.determine().name(),
+  },
 }
 
 // Set up the redux store.
diff --git a/app/lib/i18n/index.js b/app/lib/i18n/index.js
index e7381b7c08a..3392f8362a7 100644
--- a/app/lib/i18n/index.js
+++ b/app/lib/i18n/index.js
@@ -23,7 +23,7 @@ export const locales = [
   'tr',
   'uk',
   'zh-CN',
-  'zh-TW'
+  'zh-TW',
 ]
 
 // Define list of currencies that we will support.
@@ -50,7 +50,7 @@ export const currencies = [
   'SGD',
   'THB',
   'TWB',
-  'UAH'
+  'UAH',
 ]
 
 /**
@@ -89,7 +89,7 @@ export const getLanguageName = lang => {
   const customNames = {
     el: 'Greek',
     'zh-CN': 'Chinese (Simplified, PRC)',
-    'zh-TW': 'Chinese (Traditional, Taiwan)'
+    'zh-TW': 'Chinese (Traditional, Taiwan)',
   }
   if (customNames[lang]) {
     return customNames[lang]
diff --git a/app/lib/i18n/locale.js b/app/lib/i18n/locale.js
index 7e01e111f18..57b75992ffc 100644
--- a/app/lib/i18n/locale.js
+++ b/app/lib/i18n/locale.js
@@ -39,5 +39,5 @@ addLocaleData([
   ...sv,
   ...tr,
   ...uk,
-  ...zh
+  ...zh,
 ])
diff --git a/app/lib/i18n/translation.js b/app/lib/i18n/translation.js
index e1e36996eb5..804b6e5d6e3 100644
--- a/app/lib/i18n/translation.js
+++ b/app/lib/i18n/translation.js
@@ -39,7 +39,7 @@ const translations = {
   es: esTranslationMessages,
   sv: svTranslationMessages,
   tr: trTranslationMessages,
-  uk: ukTranslationMessages
+  uk: ukTranslationMessages,
 }
 
 export default translations
diff --git a/app/lib/lnd/config.js b/app/lib/lnd/config.js
index b1ff45ade8e..71214f23b03 100644
--- a/app/lib/lnd/config.js
+++ b/app/lib/lnd/config.js
@@ -22,19 +22,19 @@ const LNDCONFIG_TYPE_CUSTOM = 'custom'
 // Supported connection types.
 export const types = {
   [LNDCONFIG_TYPE_LOCAL]: 'Local',
-  [LNDCONFIG_TYPE_CUSTOM]: 'Custom'
+  [LNDCONFIG_TYPE_CUSTOM]: 'Custom',
 }
 
 // Supported chains.
 export const chains = {
   bitcoin: 'Bitcoin',
-  litecoin: 'Litecoin'
+  litecoin: 'Litecoin',
 }
 
 // Supported networks.
 export const networks = {
   mainnet: 'Mainnet',
-  testnet: 'Testnet'
+  testnet: 'Testnet',
 }
 
 // Type definition for LndConfig constructor options.
@@ -58,7 +58,7 @@ export type LndConfigOptions = {
   autopilotMinchansize?: number,
   autopilotMaxchansize?: number,
   autopilotPrivate?: boolean,
-  autopilotMinconfs?: number
+  autopilotMinconfs?: number,
 }
 
 const _isReady = new WeakMap()
@@ -84,7 +84,7 @@ class LndConfig {
     autopilotMaxchansize: 16777215,
     autopilotAllocation: 0.6,
     autopilotPrivate: true,
-    autopilotMinconfs: 0
+    autopilotMinconfs: 0,
   }
 
   // Type descriptor properties.
@@ -134,26 +134,26 @@ class LndConfig {
         enumerable: true,
         get() {
           return `wallet-${this.id}`
-        }
+        },
       },
       lndconnectQRCode: {
         enumerable: true,
         get() {
           return _lndconnectQRCode.get(this)
-        }
+        },
       },
 
       isReady: {
         enumerable: false,
         get() {
           return _isReady.get(this)
-        }
+        },
       },
       binaryPath: {
         enumerable: false,
         get() {
           return binaryPath()
-        }
+        },
       },
       lndDir: {
         enumerable: false,
@@ -161,13 +161,13 @@ class LndConfig {
           if (this.type === LNDCONFIG_TYPE_LOCAL) {
             return join(app.getPath('userData'), 'lnd', this.chain, this.network, this.wallet)
           }
-        }
+        },
       },
       configPath: {
         enumerable: false,
         get() {
           return join(appRootPath(), 'resources', 'lnd.conf')
-        }
+        },
       },
 
       host: {
@@ -177,7 +177,7 @@ class LndConfig {
         },
         get() {
           return this.getConnectionProp('host')
-        }
+        },
       },
       cert: {
         enumerable: false,
@@ -186,7 +186,7 @@ class LndConfig {
         },
         get() {
           return this.getConnectionProp('cert')
-        }
+        },
       },
       macaroon: {
         enumerable: false,
@@ -195,8 +195,8 @@ class LndConfig {
         },
         get() {
           return this.getConnectionProp('macaroon')
-        }
-      }
+        },
+      },
     })
 
     // Assign default options.
@@ -310,7 +310,7 @@ class LndConfig {
     const { host, cert, macaroon } = lndconnect.decode(lndconnectUri)
     const [certData, macaroonData] = await Promise.all([
       isAbsolute(cert) ? readFile(cert) : cert,
-      isAbsolute(macaroon) ? readFile(macaroon) : macaroon
+      isAbsolute(macaroon) ? readFile(macaroon) : macaroon,
     ])
     return lndconnect.encode({ host, cert: certData, macaroon: macaroonData })
   }
diff --git a/app/lib/lnd/lightning.js b/app/lib/lnd/lightning.js
index 06f501593c1..d4a9f83c4d8 100644
--- a/app/lib/lnd/lightning.js
+++ b/app/lib/lnd/lightning.js
@@ -13,7 +13,7 @@ import {
   getDeadline,
   createSslCreds,
   createMacaroonCreds,
-  waitForFile
+  waitForFile,
 } from './util'
 import { promisifiedCall } from '../utils'
 import { validateHost } from '../utils/validateHost'
@@ -28,7 +28,7 @@ import { getInfo } from './methods/networkController'
 type LightningSubscriptionsType = {
   channelGraph: any,
   invoices: any,
-  transactions: any
+  transactions: any,
 }
 
 const _version = new WeakMap()
@@ -50,13 +50,13 @@ class Lightning {
       transitions: [
         { name: 'connect', from: 'ready', to: 'connected' },
         { name: 'disconnect', from: 'connected', to: 'ready' },
-        { name: 'terminate', from: 'connected', to: 'ready' }
+        { name: 'terminate', from: 'connected', to: 'ready' },
       ],
       methods: {
         onBeforeConnect: this.onBeforeConnect.bind(this),
         onBeforeDisconnect: this.onBeforeDisconnect.bind(this),
-        onBeforeTerminate: this.onBeforeTerminate.bind(this)
-      }
+        onBeforeTerminate: this.onBeforeTerminate.bind(this),
+      },
     })
 
     this.mainWindow = null
@@ -65,7 +65,7 @@ class Lightning {
     this.subscriptions = {
       channelGraph: null,
       invoices: null,
-      transactions: null
+      transactions: null,
     }
   }
 
@@ -119,7 +119,7 @@ class Lightning {
     // Determine most relevant proto version and reconnect using the right rpc.proto if we need to.
     const [closestProtoVersion, latestProtoVersion] = await Promise.all([
       lndgrpc.getClosestProtoVersion(info.version, lndGpcProtoPath()),
-      lndgrpc.getLatestProtoVersion(lndGpcProtoPath())
+      lndgrpc.getLatestProtoVersion(lndGpcProtoPath()),
     ])
 
     if (closestProtoVersion !== latestProtoVersion) {
@@ -186,7 +186,7 @@ class Lightning {
     // Create ssl and macaroon credentials to use with the gRPC client.
     const [sslCreds, macaroonCreds] = await Promise.all([
       createSslCreds(cert),
-      createMacaroonCreds(macaroon)
+      createMacaroonCreds(macaroon),
     ])
     const creds = credentials.combineChannelCredentials(sslCreds, macaroonCreds)
 
diff --git a/app/lib/lnd/methods/channelController.js b/app/lib/lnd/methods/channelController.js
index be2cb8f9f9b..565f8465f1a 100644
--- a/app/lib/lnd/methods/channelController.js
+++ b/app/lib/lnd/methods/channelController.js
@@ -28,7 +28,7 @@ export function connectAndOpen(lnd, event, payload) {
         node_pubkey: Buffer.from(pubkey, 'hex'),
         local_funding_amount: Number(localamt),
         private: privateChannel,
-        sat_per_byte: satPerByte
+        sat_per_byte: satPerByte,
       })
 
       call.on('data', data => event.sender.send('pushchannelupdated', { pubkey, data }))
@@ -56,7 +56,7 @@ export function openChannel(lnd, event, payload) {
   const req = {
     node_pubkey: Buffer.from(pubkey, 'hex'),
     local_funding_amount: Number(localamt),
-    push_sat: Number(pushamt)
+    push_sat: Number(pushamt),
   }
 
   return pushopenchannel(lnd, event, req)
@@ -100,7 +100,7 @@ export function closeChannel(lnd, event, payload) {
   const {
     channel_point: { funding_txid, output_index },
     chan_id,
-    force
+    force,
   } = payload
   const tx = funding_txid
     .match(/.{2}/g)
@@ -110,9 +110,9 @@ export function closeChannel(lnd, event, payload) {
   const res = {
     channel_point: {
       funding_txid_bytes: Buffer.from(tx, 'hex'),
-      output_index: Number(output_index)
+      output_index: Number(output_index),
     },
-    force
+    force,
   }
 
   return new Promise((resolve, reject) => {
diff --git a/app/lib/lnd/methods/index.js b/app/lib/lnd/methods/index.js
index 4057703af01..7994c3fb98b 100644
--- a/app/lib/lnd/methods/index.js
+++ b/app/lib/lnd/methods/index.js
@@ -97,14 +97,14 @@ export default function(lightning, log, event, msg, data) {
         [
           channelController.listChannels,
           channelController.pendingChannels,
-          channelController.closedChannels
+          channelController.closedChannels,
         ].map(func => func(lnd))
       )
         .then(channelsData =>
           event.sender.send('receiveChannels', {
             channels: channelsData[0].channels,
             pendingChannels: channelsData[1],
-            closedChannels: channelsData[2].channels
+            closedChannels: channelsData[2].channels,
           })
         )
         .catch(error => log.error('channels:', error))
@@ -145,7 +145,7 @@ export default function(lightning, log, event, msg, data) {
         .then(balance => {
           event.sender.send('receiveBalance', {
             walletBalance: balance[0],
-            channelBalance: balance[1].balance
+            channelBalance: balance[1].balance,
           })
           return balance
         })
@@ -157,7 +157,7 @@ export default function(lightning, log, event, msg, data) {
         .then(newinvoice =>
           Promise.all([
             newinvoice,
-            invoicesController.getInvoice(lnd, { pay_req: newinvoice.payment_request })
+            invoicesController.getInvoice(lnd, { pay_req: newinvoice.payment_request }),
           ])
         )
         .then(([newinvoice, decodedInvoice]) =>
@@ -168,7 +168,7 @@ export default function(lightning, log, event, msg, data) {
               value: data.value,
               r_hash: Buffer.from(newinvoice.r_hash, 'hex').toString('hex'),
               payment_request: newinvoice.payment_request,
-              creation_date: Date.now() / 1000
+              creation_date: Date.now() / 1000,
             })
           )
         )
diff --git a/app/lib/lnd/methods/invoicesController.js b/app/lib/lnd/methods/invoicesController.js
index 90ef0794953..ce037e1c03c 100644
--- a/app/lib/lnd/methods/invoicesController.js
+++ b/app/lib/lnd/methods/invoicesController.js
@@ -13,7 +13,7 @@ export function addInvoice(lnd, { memo, value, private: privateInvoice }) {
     memo,
     value,
     private: privateInvoice,
-    expiry: 86400
+    expiry: 86400,
   })
 }
 
diff --git a/app/lib/lnd/methods/networkController.js b/app/lib/lnd/methods/networkController.js
index 7fe5312f1b3..e63da8f94e1 100644
--- a/app/lib/lnd/methods/networkController.js
+++ b/app/lib/lnd/methods/networkController.js
@@ -39,7 +39,7 @@ export function queryRoutes(lnd, { pubkey, amount, numRoutes = 15 }) {
   return promisifiedCall(lnd, lnd.queryRoutes, {
     pub_key: pubkey,
     amt: amount,
-    num_routes: numRoutes
+    num_routes: numRoutes,
   })
 }
 
diff --git a/app/lib/lnd/methods/paymentsController.js b/app/lib/lnd/methods/paymentsController.js
index 002258c1fd2..0b83e567781 100644
--- a/app/lib/lnd/methods/paymentsController.js
+++ b/app/lib/lnd/methods/paymentsController.js
@@ -14,7 +14,7 @@ export function sendPayment(lnd, { paymentRequest, amt, feeLimit }) {
     const request = {
       payment_request: paymentRequest,
       amt,
-      fee_limit: { fixed: feeLimit }
+      fee_limit: { fixed: feeLimit },
     }
     const call = lnd.sendPayment({})
     call.on('data', resolve)
@@ -35,7 +35,7 @@ export function sendPaymentSync(lnd, { paymentRequest, amt, feeLimit }) {
       const request = {
         payment_request: paymentRequest,
         amt,
-        fee_limit: { fixed: feeLimit }
+        fee_limit: { fixed: feeLimit },
       }
       lnd.sendPaymentSync(request, (err, data) => {
         if (err) {
diff --git a/app/lib/lnd/methods/walletController.js b/app/lib/lnd/methods/walletController.js
index 35d81b9022c..346f1f86fff 100644
--- a/app/lib/lnd/methods/walletController.js
+++ b/app/lib/lnd/methods/walletController.js
@@ -70,7 +70,7 @@ export function genSeed(walletUnlocker) {
  */
 export function unlockWallet(walletUnlocker, { wallet_password }) {
   return promisifiedCall(walletUnlocker, walletUnlocker.unlockWallet, {
-    wallet_password: Buffer.from(wallet_password)
+    wallet_password: Buffer.from(wallet_password),
   })
 }
 
@@ -87,6 +87,6 @@ export function initWallet(
     wallet_password: Buffer.from(wallet_password),
     cipher_seed_mnemonic,
     aezeed_passphrase: Buffer.from(aezeed_passphrase, 'hex'),
-    recovery_window
+    recovery_window,
   })
 }
diff --git a/app/lib/lnd/neutrino.js b/app/lib/lnd/neutrino.js
index 91c54510da3..f8ef50b9c92 100644
--- a/app/lib/lnd/neutrino.js
+++ b/app/lib/lnd/neutrino.js
@@ -35,8 +35,8 @@ const DEFAULT_REST_PORT = 8180
 class Neutrino extends EventEmitter {
   lndConfig: LndConfig
   process: any
-  walletUnlockerGrpcActive: boolean
-  lightningGrpcActive: boolean
+  isWalletUnlockerGrpcActive: boolean
+  isLightningGrpcActive: boolean
   chainSyncStatus: string
   currentBlockHeight: number
   lndBlockHeight: number
@@ -47,8 +47,8 @@ class Neutrino extends EventEmitter {
     super()
     this.lndConfig = lndConfig
     this.process = null
-    this.walletUnlockerGrpcActive = false
-    this.lightningGrpcActive = false
+    this.isWalletUnlockerGrpcActive = false
+    this.isLightningGrpcActive = false
     this.chainSyncStatus = CHAIN_SYNC_PENDING
     this.currentBlockHeight = 0
     this.lndBlockHeight = 0
@@ -96,7 +96,7 @@ class Neutrino extends EventEmitter {
     const rpcListen = isDev
       ? await getPort({
           host: 'localhost',
-          port: [10009, 10008, 10007, 10006, 10005, 10004, 10003, 10002, 10001]
+          port: [10009, 10008, 10007, 10006, 10005, 10004, 10003, 10002, 10001],
         })
       : DEFAULT_RPC_PORT
     this.lndConfig.host = `localhost:${rpcListen}`
@@ -105,14 +105,14 @@ class Neutrino extends EventEmitter {
     const restListen = isDev
       ? await getPort({
           host: 'localhost',
-          port: [8080, 8081, 8082, 8083, 8084, 8085, 8086, 8087, 8088, 8089]
+          port: [8080, 8081, 8082, 8083, 8084, 8085, 8086, 8087, 8088, 8089],
         })
       : DEFAULT_REST_PORT
 
     // Get a free port to use as the p2p listen address.
     const p2pListen = await getPort({
       host: '0.0.0.0',
-      port: [9735, 9734, 9733, 9732, 9731, 9736, 9737, 9738, 9739]
+      port: [9735, 9734, 9733, 9732, 9731, 9736, 9737, 9738, 9739],
     })
 
     // Genreate autopilot config.
@@ -121,7 +121,7 @@ class Neutrino extends EventEmitter {
       autopilotMaxchannels: '--autopilot.maxchannels',
       autopilotMinchansize: '--autopilot.minchansize',
       autopilotMaxchansize: '--autopilot.maxchansize',
-      autopilotMinconfs: '--autopilot.minconfs'
+      autopilotMinconfs: '--autopilot.minconfs',
     }
     const autopilotConf = []
     Object.entries(this.lndConfig).forEach(([key, value]) => {
@@ -140,7 +140,7 @@ class Neutrino extends EventEmitter {
       `${this.lndConfig.alias ? `--alias=${this.lndConfig.alias}` : ''}`,
       `${this.lndConfig.autopilot ? '--autopilot.active' : ''}`,
       `${this.lndConfig.autopilotPrivate ? '--autopilot.private' : ''}`,
-      ...autopilotConf
+      ...autopilotConf,
     ]
 
     // Configure neutrino backend.
@@ -188,17 +188,17 @@ class Neutrino extends EventEmitter {
       }
 
       // password RPC server listening (wallet unlocker started).
-      if (!this.walletUnlockerGrpcActive && !this.lightningGrpcActive) {
+      if (!this.isWalletUnlockerGrpcActive && !this.isLightningGrpcActive) {
         if (line.includes('RPC server listening on') && line.includes('password')) {
-          this.walletUnlockerGrpcActive = true
+          this.isWalletUnlockerGrpcActive = true
           this.emit(WALLET_UNLOCKER_GRPC_ACTIVE)
         }
       }
 
       // RPC server listening (wallet unlocked).
-      if (!this.lightningGrpcActive) {
+      if (!this.isLightningGrpcActive) {
         if (line.includes('RPC server listening on') && !line.includes('password')) {
-          this.lightningGrpcActive = true
+          this.isLightningGrpcActive = true
           this.emit(LIGHTNING_GRPC_ACTIVE)
         }
       }
diff --git a/app/lib/lnd/util.js b/app/lib/lnd/util.js
index 45587a64f3c..1e2482743b4 100644
--- a/app/lib/lnd/util.js
+++ b/app/lib/lnd/util.js
@@ -72,23 +72,23 @@ export const fetchBlockHeight = () => {
   const sources = [
     {
       baseUrl: `https://testnet-api.smartbit.com.au/v1/blockchain/blocks?limit=1`,
-      path: 'blocks[0].height'
+      path: 'blocks[0].height',
     },
     {
       baseUrl: `https://tchain.api.btc.com/v3/block/latest`,
-      path: 'data.height'
+      path: 'data.height',
     },
     {
       baseUrl: `https://api.blockcypher.com/v1/btc/test3`,
-      path: 'height'
-    }
+      path: 'height',
+    },
   ]
   const fetchData = (baseUrl, path) => {
     mainLog.info(`Fetching current block height from ${baseUrl}`)
     return axios({
       method: 'get',
       timeout: 5000,
-      url: baseUrl
+      url: baseUrl,
     })
       .then(response => {
         const height = Number(get(response.data, path))
@@ -218,5 +218,5 @@ export const grpcOptions = {
   longs: Number,
   enums: String,
   defaults: true,
-  oneofs: true
+  oneofs: true,
 }
diff --git a/app/lib/lnd/walletUnlocker.js b/app/lib/lnd/walletUnlocker.js
index 71b9cc46827..b6e56138985 100644
--- a/app/lib/lnd/walletUnlocker.js
+++ b/app/lib/lnd/walletUnlocker.js
@@ -25,12 +25,12 @@ class WalletUnlocker {
       init: 'ready',
       transitions: [
         { name: 'connect', from: 'ready', to: 'connected' },
-        { name: 'disconnect', from: 'connected', to: 'ready' }
+        { name: 'disconnect', from: 'connected', to: 'ready' },
       ],
       methods: {
         onBeforeConnect: this.onBeforeConnect.bind(this),
-        onBeforeDisconnect: this.onBeforeDisconnect.bind(this)
-      }
+        onBeforeDisconnect: this.onBeforeDisconnect.bind(this),
+      },
     })
     this.service = null
     this.lndConfig = lndConfig
diff --git a/app/lib/lnd/walletUnlockerMethods/index.js b/app/lib/lnd/walletUnlockerMethods/index.js
index d02147b76b5..3c0cc16577a 100644
--- a/app/lib/lnd/walletUnlockerMethods/index.js
+++ b/app/lib/lnd/walletUnlockerMethods/index.js
@@ -7,7 +7,7 @@ export default function(walletUnlocker, log, event, msg, data, lndConfig) {
       // wallet already exists
       case 2:
         error.context = {
-          lndDataDir: dirname(lndConfig.cert)
+          lndDataDir: dirname(lndConfig.cert),
         }
     }
     return error
diff --git a/app/lib/utils/api.js b/app/lib/utils/api.js
index 517335b2546..0131cd2c2d5 100644
--- a/app/lib/utils/api.js
+++ b/app/lib/utils/api.js
@@ -17,7 +17,7 @@ export function requestTicker(id) {
   const BASE_URL = `${scheme}api.coinbase.com/v2/exchange-rates?currency=${id}`
   return axios({
     method: 'get',
-    url: BASE_URL
+    url: BASE_URL,
   }).then(response => response.data)
 }
 
@@ -25,7 +25,7 @@ export function requestTickers(ids) {
   return axios.all(ids.map(id => requestTicker(id))).then(
     axios.spread((btcTicker, ltcTicker) => ({
       btcTicker: btcTicker.data.rates,
-      ltcTicker: ltcTicker.data.rates
+      ltcTicker: ltcTicker.data.rates,
     }))
   )
 }
@@ -34,7 +34,7 @@ export function requestSuggestedNodes() {
   const BASE_URL = `${scheme}zap.jackmallers.com/api/v1/suggested-peers`
   return axios({
     method: 'get',
-    url: BASE_URL
+    url: BASE_URL,
   }).then(response => response.data)
 }
 
@@ -42,6 +42,6 @@ export function requestFees() {
   const BASE_URL = 'https://bitcoinfees.earn.com/api/v1/fees/recommended'
   return axios({
     method: 'get',
-    url: BASE_URL
+    url: BASE_URL,
   }).then(response => response.data)
 }
diff --git a/app/lib/utils/blockExplorer.js b/app/lib/utils/blockExplorer.js
index 865c2d62b45..e3862b1a39c 100644
--- a/app/lib/utils/blockExplorer.js
+++ b/app/lib/utils/blockExplorer.js
@@ -16,5 +16,5 @@ export default {
   showTransaction,
   showBlock,
   showChannelClosing,
-  showChannelPoint
+  showChannelPoint,
 }
diff --git a/app/lib/utils/crypto.js b/app/lib/utils/crypto.js
index 97b95594f00..fbde212f7ce 100644
--- a/app/lib/utils/crypto.js
+++ b/app/lib/utils/crypto.js
@@ -7,24 +7,24 @@ export const networks = {
   bitcoin: {
     mainnet: coininfo.bitcoin.main.toBitcoinJS(),
     testnet: coininfo.bitcoin.test.toBitcoinJS(),
-    regtest: coininfo.bitcoin.regtest.toBitcoinJS()
+    regtest: coininfo.bitcoin.regtest.toBitcoinJS(),
   },
   litecoin: {
     mainnet: coininfo.litecoin.main.toBitcoinJS(),
-    testnet: coininfo.litecoin.test.toBitcoinJS()
-  }
+    testnet: coininfo.litecoin.test.toBitcoinJS(),
+  },
 }
 
 export const coinTypes = {
   bitcoin: {
     mainnet: 'bitcoin',
     testnet: 'testnet',
-    regtest: 'regtest'
+    regtest: 'regtest',
   },
   litecoin: {
     mainnet: 'litecoin',
-    testnet: 'litecoin_testnet'
-  }
+    testnet: 'litecoin_testnet',
+  },
 }
 
 export const decodePayReq = (payReq, addDefaults = true) => {
@@ -33,7 +33,7 @@ export const decodePayReq = (payReq, addDefaults = true) => {
   if (addDefaults && !expiry) {
     data.tags.push({
       tagName: 'expire_time',
-      data: 3600
+      data: 3600,
     })
     data.timeExpireDate = data.timestamp + 3600
     data.timeExpireDateString = new Date(data.timeExpireDate * 1000).toISOString()
@@ -180,5 +180,5 @@ export const getMaxFee = routes => {
  */
 export const getFeeRange = (routes = []) => ({
   min: getMinFee(routes),
-  max: getMaxFee(routes)
+  max: getMaxFee(routes),
 })
diff --git a/app/lib/utils/db.js b/app/lib/utils/db.js
index f735883e548..125fba457e9 100644
--- a/app/lib/utils/db.js
+++ b/app/lib/utils/db.js
@@ -1,6 +1,6 @@
 export const getDbName = config => {
   const {
-    db: { namespace, domain }
+    db: { namespace, domain },
   } = config
   const env = process.env.NODE_ENV || 'development'
 
diff --git a/app/lib/utils/localWallets.js b/app/lib/utils/localWallets.js
index 46d19f24edb..e7bc26b9c3f 100644
--- a/app/lib/utils/localWallets.js
+++ b/app/lib/utils/localWallets.js
@@ -22,7 +22,7 @@ export async function getLocalWallets(chain, network) {
       type: 'local',
       chain,
       network,
-      wallet
+      wallet,
     }))
   } catch (err) {
     return []
@@ -40,7 +40,7 @@ export async function getAllLocalWallets() {
     supportedNetworks.forEach(network => {
       configs.push({
         chain,
-        network
+        network,
       })
     })
   })
diff --git a/app/lib/utils/log.js b/app/lib/utils/log.js
index f9cf51d8ac8..f9189c69728 100644
--- a/app/lib/utils/log.js
+++ b/app/lib/utils/log.js
@@ -2,7 +2,7 @@ import debugLogger from 'debug-logger'
 
 // Enable colours for object inspection.
 debugLogger.inspectOptions = {
-  colors: true
+  colors: true,
 }
 
 // Enable all zap logs if DEBUG has not been explicitly set.
@@ -19,36 +19,36 @@ const logConfig = name => ({
   levels: {
     trace: {
       prefix: '[TRC]  ',
-      namespaceSuffix: `:${name}`
+      namespaceSuffix: `:${name}`,
     },
     debug: {
       prefix: '[DBG]  ',
-      namespaceSuffix: `:${name}`
+      namespaceSuffix: `:${name}`,
     },
     log: {
       prefix: '[LOG]  ',
-      namespaceSuffix: `:${name}`
+      namespaceSuffix: `:${name}`,
     },
     info: {
       prefix: '[INF]  ',
-      namespaceSuffix: `:${name}`
+      namespaceSuffix: `:${name}`,
     },
     warn: {
       prefix: '[WRN]  ',
-      namespaceSuffix: `:${name}`
+      namespaceSuffix: `:${name}`,
     },
     error: {
       prefix: '[ERR]  ',
-      namespaceSuffix: `:${name}`
+      namespaceSuffix: `:${name}`,
     },
     critical: {
       color: debugLogger.colors.magenta,
       prefix: '[CRT]  ',
       namespaceSuffix: `:${name}`,
       level: 6,
-      fd: 2
-    }
-  }
+      fd: 2,
+    },
+  },
 })
 
 // Create logs for use in the app.
@@ -65,7 +65,7 @@ export const lndLogGetLevel = msg => {
     INF: 'info',
     WRN: 'warn',
     ERR: 'error',
-    CRT: 'critical'
+    CRT: 'critical',
   }
 
   // Parse the log line to determine its level.
diff --git a/app/lib/utils/userFriendlyErrors.js b/app/lib/utils/userFriendlyErrors.js
index d6682ecf998..52c10167c3c 100644
--- a/app/lib/utils/userFriendlyErrors.js
+++ b/app/lib/utils/userFriendlyErrors.js
@@ -1,7 +1,7 @@
 const userFriendlyErrors = {
   'Error: 11 OUT_OF_RANGE: EOF':
     "The person you're trying to connect to isn't available or rejected the connection.\
- Their public key may have changed or the server may no longer be responding."
+ Their public key may have changed or the server may no longer be responding.",
 }
 
 const errorToUserFriendly = (error = '') => {
diff --git a/app/lib/zap/about/index.js b/app/lib/zap/about/index.js
index 1e9d83ee379..815f618b6c5 100644
--- a/app/lib/zap/about/index.js
+++ b/app/lib/zap/about/index.js
@@ -24,8 +24,8 @@ function openAboutWindow(info, htmlPath) {
       nodeIntegration: false,
       preload: process.env.HOT
         ? path.resolve(__dirname, 'preload.js')
-        : path.resolve(__dirname, 'about_preload.prod.js')
-    }
+        : path.resolve(__dirname, 'about_preload.prod.js'),
+    },
   }
   window = new BrowserWindow(options)
 
diff --git a/app/lib/zap/about/public/renderer.js b/app/lib/zap/about/public/renderer.js
index 383ce4d09fe..823559db859 100644
--- a/app/lib/zap/about/public/renderer.js
+++ b/app/lib/zap/about/public/renderer.js
@@ -22,7 +22,7 @@ window.ipcRenderer.on('about-window:info', (_, info) => {
   }
 
   if (info.css_path) {
-    const css_paths = !Array.isArray(info.css_path) ? [info.css_path] : info.css_path
+    const css_paths = Array.isArray(info.css_path) ? info.css_path : [info.css_path]
     for (const css_path of css_paths) {
       const link = document.createElement('link')
       link.rel = 'stylesheet'
diff --git a/app/lib/zap/controller.js b/app/lib/zap/controller.js
index c49aa3c7dc6..5a312c2434e 100644
--- a/app/lib/zap/controller.js
+++ b/app/lib/zap/controller.js
@@ -17,7 +17,7 @@ const LND_METHOD_UNAVAILABLE = 12
 
 type shutdownOptions = {
   signal?: string,
-  timeout?: number
+  timeout?: number,
 }
 
 const grpcSslCipherSuites = () => {
@@ -38,7 +38,7 @@ const grpcSslCipherSuites = () => {
     // BTCPay Server serves lnd behind an nginx proxy with a trusted SSL cert from Lets Encrypt.
     // These certs use an RSA TLS cipher suite.
     'ECDHE-RSA-AES256-GCM-SHA384',
-    'ECDHE-RSA-AES128-GCM-SHA256'
+    'ECDHE-RSA-AES128-GCM-SHA256',
   ].join(':')
 }
 
@@ -86,7 +86,7 @@ class ZapController {
           { name: 'startLocalLnd', from: 'onboarding', to: 'running' },
           { name: 'startRemoteLnd', from: 'onboarding', to: 'connected' },
           { name: 'stopLnd', from: '*', to: 'onboarding' },
-          { name: 'terminate', from: '*', to: 'terminated' }
+          { name: 'terminate', from: '*', to: 'terminated' },
         ],
         methods: {
           onOnboarding: this.onOnboarding.bind(this),
@@ -95,8 +95,8 @@ class ZapController {
           onBeforeStartRemoteLnd: this.onBeforeStartRemoteLnd.bind(this),
           onBeforeStopLnd: this.onBeforeStopLnd.bind(this),
           onTerminated: this.onTerminated.bind(this),
-          onTerminate: this.onTerminate.bind(this)
-        }
+          onTerminate: this.onTerminate.bind(this),
+        },
       })
 
       // Show the window as soon as the application has finished loading.
@@ -221,7 +221,7 @@ class ZapController {
       const MACAROON_ERROR_MESSAGES = [
         'cannot determine data format of binary-encoded macaroon',
         'verification failed: signature mismatch after caveat verification',
-        'unmarshal v2: section extends past end of buffer'
+        'unmarshal v2: section extends past end of buffer',
       ]
       // else try to figure out the error
       const errors = {}
@@ -286,13 +286,13 @@ class ZapController {
     if (this.mainWindow) {
       mainLog.info('Sending message to renderer process: %o', {
         msg,
-        data: sanitize(data, ['lndconnectUri', 'lndconnectQRCode'])
+        data: sanitize(data, ['lndconnectUri', 'lndconnectQRCode']),
       })
       this.mainWindow.webContents.send(msg, data)
     } else {
       mainLog.warn('Unable to send message to renderer process (main window not available): %o', {
         msg,
-        data
+        data,
       })
     }
   }
@@ -314,7 +314,7 @@ class ZapController {
       )
 
       // Notify the renderer that the wallet unlocker is active.
-      this.sendMessage('walletUnlockerGrpcActive', this.lndConfig)
+      this.sendMessage('walletUnlockerStarted', this.lndConfig)
     } catch (err) {
       mainLog.warn('Unable to connect to WalletUnlocker gRPC interface: %o', err)
       throw err
@@ -339,7 +339,7 @@ class ZapController {
       ipcMain.on('lnd', (event, { msg, data }) => this.lightning.registerMethods(event, msg, data))
 
       // Let the renderer know that we are connected.
-      this.sendMessage('lightningGrpcActive', this.lndConfig)
+      this.sendMessage('lightningWalletStarted', this.lndConfig)
     } catch (err) {
       mainLog.warn('Unable to connect to Lightning gRPC interface: %o', err)
       throw err
@@ -358,7 +358,7 @@ class ZapController {
       mainLog.error(`Got error from lnd process: ${error})`)
       dialog.showMessageBox({
         type: 'error',
-        message: `lnd error: ${error}`
+        message: `lnd error: ${error}`,
       })
     })
 
diff --git a/app/lib/zap/menuBuilder.js b/app/lib/zap/menuBuilder.js
index ed601719840..4209f48be4b 100644
--- a/app/lib/zap/menuBuilder.js
+++ b/app/lib/zap/menuBuilder.js
@@ -18,7 +18,7 @@ const buildAboutMenu = () => {
         {
           icon_path: path.resolve(appRootPath(), 'resources', 'icons', 'icon.png'),
           open_devtools: process.env.NODE_ENV !== 'production',
-          product_name: `${productName} ${version}`
+          product_name: `${productName} ${version}`,
         },
         `file://${path.resolve(
           process.env.HOT ? 'app' : app.getAppPath(),
@@ -26,7 +26,7 @@ const buildAboutMenu = () => {
           'about.html'
         )}`
       )
-    }
+    },
   }
 }
 
@@ -63,7 +63,7 @@ export default class ZapMenuBuilder {
     const selectionMenu = Menu.buildFromTemplate([
       { role: 'copy' },
       { type: 'separator' },
-      { role: 'selectall' }
+      { role: 'selectall' },
     ])
 
     const inputMenu = Menu.buildFromTemplate([
@@ -74,7 +74,7 @@ export default class ZapMenuBuilder {
       { role: 'copy' },
       { role: 'paste' },
       { type: 'separator' },
-      { role: 'selectall' }
+      { role: 'selectall' },
     ])
 
     this.mainWindow.webContents.on('context-menu', (e, props) => {
@@ -98,7 +98,7 @@ export default class ZapMenuBuilder {
         {
           label: 'Hide Others',
           accelerator: 'Command+Shift+H',
-          selector: 'hideOtherApplications:'
+          selector: 'hideOtherApplications:',
         },
         { label: 'Show All', selector: 'unhideAllApplications:' },
         { type: 'separator' },
@@ -107,9 +107,9 @@ export default class ZapMenuBuilder {
           accelerator: 'Command+Q',
           click: () => {
             app.quit()
-          }
-        }
-      ]
+          },
+        },
+      ],
     }
     const subMenuEdit = {
       label: 'Edit',
@@ -120,8 +120,8 @@ export default class ZapMenuBuilder {
         { label: 'Cut', accelerator: 'Command+X', selector: 'cut:' },
         { label: 'Copy', accelerator: 'Command+C', selector: 'copy:' },
         { label: 'Paste', accelerator: 'Command+V', selector: 'paste:' },
-        { label: 'Select All', accelerator: 'Command+A', selector: 'selectAll:' }
-      ]
+        { label: 'Select All', accelerator: 'Command+A', selector: 'selectAll:' },
+      ],
     }
     const subMenuViewDev = {
       label: 'View',
@@ -131,23 +131,23 @@ export default class ZapMenuBuilder {
           accelerator: 'Command+R',
           click: () => {
             this.mainWindow.webContents.reload()
-          }
+          },
         },
         {
           label: 'Toggle Full Screen',
           accelerator: 'Ctrl+Command+F',
           click: () => {
             this.mainWindow.setFullScreen(!this.mainWindow.isFullScreen())
-          }
+          },
         },
         {
           label: 'Toggle Developer Tools',
           accelerator: 'Alt+Command+I',
           click: () => {
             this.mainWindow.toggleDevTools()
-          }
-        }
-      ]
+          },
+        },
+      ],
     }
     const subMenuViewProd = {
       label: 'View',
@@ -157,9 +157,9 @@ export default class ZapMenuBuilder {
           accelerator: 'Ctrl+Command+F',
           click: () => {
             this.mainWindow.setFullScreen(!this.mainWindow.isFullScreen())
-          }
-        }
-      ]
+          },
+        },
+      ],
     }
     const subMenuWindow = {
       label: 'Window',
@@ -167,8 +167,8 @@ export default class ZapMenuBuilder {
         { label: 'Minimize', accelerator: 'Command+M', selector: 'performMiniaturize:' },
         { label: 'Close', accelerator: 'Command+W', selector: 'performClose:' },
         { type: 'separator' },
-        { label: 'Bring All to Front', selector: 'arrangeInFront:' }
-      ]
+        { label: 'Bring All to Front', selector: 'arrangeInFront:' },
+      ],
     }
     const subMenuHelp = {
       label: 'Help',
@@ -177,27 +177,27 @@ export default class ZapMenuBuilder {
           label: 'Learn More',
           click() {
             shell.openExternal('https://zap.jackmallers.com/')
-          }
+          },
         },
         {
           label: 'Documentation',
           click() {
             shell.openExternal('https://github.com/LN-Zap/zap-desktop')
-          }
+          },
         },
         {
           label: 'Community Discussions',
           click() {
             shell.openExternal('https://zaphq.slack.com')
-          }
+          },
         },
         {
           label: 'Search Issues',
           click() {
             shell.openExternal('https://github.com/LN-Zap/zap-desktop/issues')
-          }
-        }
-      ]
+          },
+        },
+      ],
     }
 
     const subMenuView = process.env.NODE_ENV === 'development' ? subMenuViewDev : subMenuViewProd
@@ -208,7 +208,7 @@ export default class ZapMenuBuilder {
       subMenuView,
       subMenuWindow,
       subMenuHelp,
-      this.buildLanguageMenu()
+      this.buildLanguageMenu(),
     ]
   }
 
@@ -219,16 +219,16 @@ export default class ZapMenuBuilder {
         submenu: [
           {
             label: '&Open',
-            accelerator: 'Ctrl+O'
+            accelerator: 'Ctrl+O',
           },
           {
             label: '&Close',
             accelerator: 'Ctrl+W',
             click: () => {
               this.mainWindow.close()
-            }
-          }
-        ]
+            },
+          },
+        ],
       },
       {
         label: '&View',
@@ -240,22 +240,22 @@ export default class ZapMenuBuilder {
                   accelerator: 'Ctrl+R',
                   click: () => {
                     this.mainWindow.webContents.reload()
-                  }
+                  },
                 },
                 {
                   label: 'Toggle &Full Screen',
                   accelerator: 'F11',
                   click: () => {
                     this.mainWindow.setFullScreen(!this.mainWindow.isFullScreen())
-                  }
+                  },
                 },
                 {
                   label: 'Toggle &Developer Tools',
                   accelerator: 'Alt+Ctrl+I',
                   click: () => {
                     this.mainWindow.toggleDevTools()
-                  }
-                }
+                  },
+                },
               ]
             : [
                 {
@@ -263,9 +263,9 @@ export default class ZapMenuBuilder {
                   accelerator: 'F11',
                   click: () => {
                     this.mainWindow.setFullScreen(!this.mainWindow.isFullScreen())
-                  }
-                }
-              ]
+                  },
+                },
+              ],
       },
       {
         label: 'Help',
@@ -274,30 +274,30 @@ export default class ZapMenuBuilder {
             label: 'Learn More',
             click() {
               shell.openExternal('https://zap.jackmallers.com/')
-            }
+            },
           },
           {
             label: 'Documentation',
             click() {
               shell.openExternal('https://github.com/LN-Zap/zap-desktop')
-            }
+            },
           },
           {
             label: 'Community Discussions',
             click() {
               shell.openExternal('zaphq.slack.com')
-            }
+            },
           },
           {
             label: 'Search Issues',
             click() {
               shell.openExternal('https://github.com/LN-Zap/zap-desktop/issues')
-            }
+            },
           },
-          buildAboutMenu()
-        ]
+          buildAboutMenu(),
+        ],
       },
-      this.buildLanguageMenu()
+      this.buildLanguageMenu(),
     ]
 
     return templateDefault
@@ -310,10 +310,10 @@ export default class ZapMenuBuilder {
         return {
           label: getLanguageName(locale),
           type: 'radio',
-          checked: this.locale === locale,
-          click: () => this.mainWindow.webContents.send('receiveLocale', locale)
+          isChecked: this.locale === locale,
+          click: () => this.mainWindow.webContents.send('receiveLocale', locale),
         }
-      })
+      }),
     }
   }
 }
diff --git a/app/lib/zap/migrator.js b/app/lib/zap/migrator.js
index 1c011e8aab2..d7043dcc840 100644
--- a/app/lib/zap/migrator.js
+++ b/app/lib/zap/migrator.js
@@ -20,8 +20,8 @@ class ZapMigrator {
     return [
       {
         id: 1,
-        up: migration_1
-      }
+        up: migration_1,
+      },
     ]
   }
 
@@ -71,7 +71,7 @@ class ZapMigrator {
   async setLastMigration(id) {
     const data = {
       id: id.toString(),
-      date: new Date()
+      date: new Date(),
     }
     await fsWriteFile(this.logFile(), JSON.stringify(data))
   }
diff --git a/app/lib/zap/updater.js b/app/lib/zap/updater.js
index 55ede176109..277eeb0864a 100644
--- a/app/lib/zap/updater.js
+++ b/app/lib/zap/updater.js
@@ -39,7 +39,7 @@ class ZapUpdater {
         type: 'question',
         buttons: ['Install', 'Later'],
         title: 'Update available',
-        message: 'An update is available. Restart the app and install?'
+        message: 'An update is available. Restart the app and install?',
       }
       dialog.showMessageBox(this.mainWindow, opt, async choice => {
         if (choice !== 0) {
diff --git a/app/main.js b/app/main.js
index 5b8e2178709..5d6889091b5 100644
--- a/app/main.js
+++ b/app/main.js
@@ -9,7 +9,7 @@
 import { app, BrowserWindow, session } from 'electron'
 import installExtension, {
   REACT_DEVELOPER_TOOLS,
-  REDUX_DEVTOOLS
+  REDUX_DEVTOOLS,
 } from 'electron-devtools-installer'
 import get from 'lodash.get'
 import path from 'path'
@@ -111,8 +111,8 @@ const fetchSettings = () => {
     show: false,
     focusable: false,
     webPreferences: {
-      nodeIntegration: false
-    }
+      nodeIntegration: false,
+    },
   })
   if (process.env.HOT) {
     const port = process.env.PORT || 1212
@@ -228,8 +228,8 @@ app.on('ready', async () => {
       nodeIntegration: false,
       preload: process.env.HOT
         ? path.resolve(__dirname, 'dist', 'preload.prod.js')
-        : path.resolve(__dirname, 'preload.prod.js')
-    }
+        : path.resolve(__dirname, 'preload.prod.js'),
+    },
   })
 
   // Initialise the migrator and run any pending migrations.
@@ -256,13 +256,13 @@ app.on('ready', async () => {
    */
   app.on('before-quit', event => {
     mainLog.trace('app.before-quit')
-    if (!zap.is('terminated')) {
-      event.preventDefault()
-      zap.terminate()
-    } else {
+    if (zap.is('terminated')) {
       if (mainWindow) {
         mainWindow.forceClose = true
       }
+    } else {
+      event.preventDefault()
+      zap.terminate()
     }
   })
 
@@ -369,15 +369,15 @@ app.on('ready', async () => {
   // HACK: patch webrequest to fix devtools incompatibility with electron 2.x.
   // See https://github.com/electron/electron/issues/13008#issuecomment-400261941
   session.defaultSession.webRequest.onBeforeRequest({}, (details, callback) => {
-    if (details.url.indexOf('7accc8730b0f99b5e7c0702ea89d1fa7c17bfe33') !== -1) {
+    if (details.url.indexOf('7accc8730b0f99b5e7c0702ea89d1fa7c17bfe33') === -1) {
+      callback({ cancel: false })
+    } else {
       callback({
         redirectURL: details.url.replace(
           '7accc8730b0f99b5e7c0702ea89d1fa7c17bfe33',
           '57c9d07b416b5a2ea23d28247300e4af36329bdc'
-        )
+        ),
       })
-    } else {
-      callback({ cancel: false })
     }
   })
 })
diff --git a/app/preload.js b/app/preload.js
index 68e033d90df..133f26f9488 100644
--- a/app/preload.js
+++ b/app/preload.js
@@ -25,7 +25,7 @@ const WHITELISTED_DOMAINS = [
   'ln-zap.github.io',
   'blockstream.info',
   'testnet.litecore.io',
-  'litecore.io'
+  'litecore.io',
 ]
 
 /**
@@ -133,7 +133,7 @@ window.Zap = {
   getUserDataDir,
   validateHost,
   fileExists,
-  killLnd
+  killLnd,
 }
 
 // Provide access to ipcRenderer.
diff --git a/app/reducers/activity.js b/app/reducers/activity.js
index f04a3be51fe..56f8eca50c0 100644
--- a/app/reducers/activity.js
+++ b/app/reducers/activity.js
@@ -20,14 +20,14 @@ const initialState = {
     { key: 'RECEIVED_ACTIVITY', name: 'Received' },
     { key: 'PENDING_ACTIVITY', name: 'Pending' },
     { key: 'EXPIRED_ACTIVITY', name: 'Expired' },
-    { key: 'INTERNAL_ACTIVITY', name: 'Internal' }
+    { key: 'INTERNAL_ACTIVITY', name: 'Internal' },
   ],
   modal: {
     itemType: null,
-    itemId: null
+    itemId: null,
   },
   searchText: '',
-  showExpiredRequests: false
+  showExpiredRequests: false,
 }
 
 // ------------------------------------
@@ -59,20 +59,20 @@ export function hideActivityModal() {
 export function changeFilter(filter) {
   return {
     type: CHANGE_FILTER,
-    filter
+    filter,
   }
 }
 
 export function updateSearchText(searchText) {
   return {
     type: UPDATE_SEARCH_TEXT,
-    searchText
+    searchText,
   }
 }
 
 export function toggleExpiredRequests() {
   return {
-    type: TOGGLE_EXPIRED_REQUESTS
+    type: TOGGLE_EXPIRED_REQUESTS,
   }
 }
 
@@ -98,15 +98,15 @@ export const fetchActivityHistory = () => dispatch => {
 const ACTION_HANDLERS = {
   [SHOW_ACTIVITY_MODAL]: (state, { itemType, itemId }) => ({
     ...state,
-    modal: { itemType, itemId }
+    modal: { itemType, itemId },
   }),
   [HIDE_ACTIVITY_MODAL]: state => ({ ...state, modal: { itemType: null, itemId: null } }),
   [CHANGE_FILTER]: (state, { filter }) => ({ ...state, filter }),
   [TOGGLE_EXPIRED_REQUESTS]: state => ({
     ...state,
-    showExpiredRequests: !state.showExpiredRequests
+    showExpiredRequests: !state.showExpiredRequests,
   }),
-  [UPDATE_SEARCH_TEXT]: (state, { searchText }) => ({ ...state, searchText })
+  [UPDATE_SEARCH_TEXT]: (state, { searchText }) => ({ ...state, searchText }),
 }
 
 // ------------------------------------
@@ -145,7 +145,7 @@ const paymentsSending = createSelector(
         payment_hash: invoice.tags.find(t => t.tagName === 'payment_hash').data,
         sending: true,
         status: payment.status,
-        error: payment.error
+        error: payment.error,
       }
     })
     return payments
@@ -165,7 +165,7 @@ const transactionsSending = createSelector(
         amount: transaction.amount,
         sending: true,
         status: transaction.status,
-        error: transaction.error
+        error: transaction.error,
       }
     })
     return transactions
@@ -218,7 +218,7 @@ const months = [
   'Sep',
   'Oct',
   'Nov',
-  'Dec'
+  'Dec',
 ]
 
 /**
@@ -285,7 +285,7 @@ const allActivity = createSelector(
       ...transactions.filter(
         transaction => !transaction.isFunding && !transaction.isClosing && !transaction.isPending
       ),
-      ...invoices.filter(invoice => invoice.settled || !invoiceExpired(invoice))
+      ...invoices.filter(invoice => invoice.settled || !invoiceExpired(invoice)),
     ]
     return prepareData(allData, searchText)
   }
@@ -308,7 +308,7 @@ const sentActivity = createSelector(
           !transaction.isFunding &&
           !transaction.isClosing &&
           !transaction.isPending
-      )
+      ),
     ]
     return prepareData(allData, searchText)
   }
@@ -327,7 +327,7 @@ const receivedActivity = createSelector(
           !transaction.isFunding &&
           !transaction.isClosing &&
           !transaction.isPending
-      )
+      ),
     ]
     return prepareData(allData, searchText)
   }
@@ -344,7 +344,7 @@ const pendingActivity = createSelector(
       ...paymentsSending,
       ...transactionsSending,
       ...transactions.filter(transaction => transaction.isPending),
-      ...invoices.filter(invoice => !invoice.settled && !invoiceExpired(invoice))
+      ...invoices.filter(invoice => !invoice.settled && !invoiceExpired(invoice)),
     ]
     return prepareData(allData, searchText)
   }
@@ -376,7 +376,7 @@ const FILTERS = {
   RECEIVED_ACTIVITY: receivedActivity,
   PENDING_ACTIVITY: pendingActivity,
   EXPIRED_ACTIVITY: expiredActivity,
-  INTERNAL_ACTIVITY: internalActivity
+  INTERNAL_ACTIVITY: internalActivity,
 }
 
 activitySelectors.currentActivity = createSelector(
diff --git a/app/reducers/address.js b/app/reducers/address.js
index b14ba4ebc9b..750d3952ebe 100644
--- a/app/reducers/address.js
+++ b/app/reducers/address.js
@@ -13,7 +13,7 @@ export const CLOSE_WALLET_MODAL = 'CLOSE_WALLET_MODAL'
 const addressTypes = {
   p2wkh: 0,
   np2wkh: 1,
-  p2pkh: 2
+  p2pkh: 2,
 }
 
 // ------------------------------------
@@ -21,7 +21,7 @@ const addressTypes = {
 // ------------------------------------
 export function getAddress() {
   return {
-    type: GET_ADDRESS
+    type: GET_ADDRESS,
   }
 }
 
@@ -84,7 +84,7 @@ const ACTION_HANDLERS = {
   [RECEIVE_ADDRESS]: (state, { address }) => ({ ...state, addressLoading: false, address }),
 
   [OPEN_WALLET_MODAL]: state => ({ ...state, walletModal: true }),
-  [CLOSE_WALLET_MODAL]: state => ({ ...state, walletModal: false })
+  [CLOSE_WALLET_MODAL]: state => ({ ...state, walletModal: false }),
 }
 
 // ------------------------------------
@@ -93,7 +93,7 @@ const ACTION_HANDLERS = {
 const initialState = {
   addressLoading: false,
   address: '',
-  walletModal: false
+  walletModal: false,
 }
 
 export default function addressReducer(state = initialState, action) {
diff --git a/app/reducers/app.js b/app/reducers/app.js
index 49460a98bbb..84e8b32e36f 100644
--- a/app/reducers/app.js
+++ b/app/reducers/app.js
@@ -5,7 +5,7 @@ import { createSelector } from 'reselect'
 // ------------------------------------
 const initialState = {
   isLoading: true,
-  isMounted: false
+  isMounted: false,
 }
 
 // ------------------------------------
@@ -21,20 +21,20 @@ export const RESET_APP = 'RESET_APP'
 export function setLoading(isLoading) {
   return {
     type: SET_LOADING,
-    isLoading
+    isLoading,
   }
 }
 
 export function setMounted(isMounted) {
   return {
     type: SET_MOUNTED,
-    isMounted
+    isMounted,
   }
 }
 
 export function resetApp() {
   return {
-    type: RESET_APP
+    type: RESET_APP,
   }
 }
 
@@ -43,7 +43,7 @@ export function resetApp() {
 // ------------------------------------
 const ACTION_HANDLERS = {
   [SET_LOADING]: (state, { isLoading }) => ({ ...state, isLoading }),
-  [SET_MOUNTED]: (state, { isMounted }) => ({ ...state, isMounted })
+  [SET_MOUNTED]: (state, { isMounted }) => ({ ...state, isMounted }),
 }
 
 // ------------------------------------
diff --git a/app/reducers/balance.js b/app/reducers/balance.js
index 2535f1cb2f6..764af46d77e 100644
--- a/app/reducers/balance.js
+++ b/app/reducers/balance.js
@@ -12,7 +12,7 @@ export const RECEIVE_BALANCE = 'RECEIVE_BALANCE'
 // ------------------------------------
 export function getBalance() {
   return {
-    type: GET_BALANCE
+    type: GET_BALANCE,
   }
 }
 
@@ -38,8 +38,8 @@ const ACTION_HANDLERS = {
     walletBalance: walletBalance.total_balance,
     walletBalanceConfirmed: walletBalance.confirmed_balance,
     walletBalanceUnconfirmed: walletBalance.unconfirmed_balance,
-    channelBalance
-  })
+    channelBalance,
+  }),
 }
 
 // Selectors
@@ -65,7 +65,7 @@ const initialState = {
   walletBalance: null,
   walletBalanceConfirmed: null,
   walletBalanceUnconfirmed: null,
-  channelBalance: null
+  channelBalance: null,
 }
 
 export default function balanceReducer(state = initialState, action) {
diff --git a/app/reducers/channels.js b/app/reducers/channels.js
index 8a07587fb60..fddce6bafc1 100644
--- a/app/reducers/channels.js
+++ b/app/reducers/channels.js
@@ -137,7 +137,7 @@ const decorateChannel = (channelObj, nodes, closingChannelIds) => {
     display_name: getDisplayName(channelData, nodes),
     display_status: status,
     can_close:
-      ['open', 'offline'].includes(status) && !closingChannelIds.includes(channelData.chan_id)
+      ['open', 'offline'].includes(status) && !closingChannelIds.includes(channelData.chan_id),
   }
 
   if (channelObj.closing_txid) {
@@ -147,7 +147,7 @@ const decorateChannel = (channelObj, nodes, closingChannelIds) => {
   if (channelObj.channel) {
     return {
       ...channelObj,
-      channel: updatedChannelData
+      channel: updatedChannelData,
     }
   }
   return updatedChannelData
@@ -169,7 +169,7 @@ export const initChannels = () => async (dispatch, getState) => {
 export const setChannelViewMode = viewMode => dispatch => {
   dispatch({
     type: SET_CHANNEL_VIEW_MODE,
-    viewMode
+    viewMode,
   })
   dispatch(putSetting('channelViewMode', viewMode))
 }
@@ -177,98 +177,98 @@ export const setChannelViewMode = viewMode => dispatch => {
 export function changeFilter(filter) {
   return {
     type: CHANGE_CHANNEL_FILTER,
-    filter
+    filter,
   }
 }
 
 export function getChannels() {
   return {
-    type: GET_CHANNELS
+    type: GET_CHANNELS,
   }
 }
 
 export function openingChannel() {
   return {
-    type: OPENING_CHANNEL
+    type: OPENING_CHANNEL,
   }
 }
 
 export function closingChannel() {
   return {
-    type: CLOSING_CHANNEL
+    type: CLOSING_CHANNEL,
   }
 }
 
 export function openingSuccessful() {
   return {
-    type: OPENING_SUCCESSFUL
+    type: OPENING_SUCCESSFUL,
   }
 }
 
 export function openingFailure() {
   return {
-    type: OPENING_FAILURE
+    type: OPENING_FAILURE,
   }
 }
 
 export function updateChannelSearchQuery(searchQuery) {
   return {
     type: UPDATE_SEARCH_QUERY,
-    searchQuery
+    searchQuery,
   }
 }
 
 export function addLoadingPubkey(pubkey) {
   return {
     type: ADD_LOADING_PUBKEY,
-    pubkey
+    pubkey,
   }
 }
 
 export function removeLoadingPubkey(pubkey) {
   return {
     type: REMOVE_LOADING_PUBKEY,
-    pubkey
+    pubkey,
   }
 }
 
 export function addClosingChanId(chanId) {
   return {
     type: ADD_ClOSING_CHAN_ID,
-    chanId
+    chanId,
   }
 }
 
 export function removeClosingChanId(chanId) {
   return {
     type: REMOVE_ClOSING_CHAN_ID,
-    chanId
+    chanId,
   }
 }
 
 export function setSelectedChannel(selectedChannelId) {
   return {
     type: SET_SELECTED_CHANNEL,
-    selectedChannelId
+    selectedChannelId,
   }
 }
 
 export function getSuggestedNodes() {
   return {
-    type: GET_SUGGESTED_NODES
+    type: GET_SUGGESTED_NODES,
   }
 }
 
 export function receiveSuggestedNodesError() {
   return {
-    type: RECEIVE_SUGGESTED_NODES_ERROR
+    type: RECEIVE_SUGGESTED_NODES_ERROR,
   }
 }
 
 export function receiveSuggestedNodes(suggestedNodes) {
   return {
     type: RECEIVE_SUGGESTED_NODES,
-    suggestedNodes
+    suggestedNodes,
   }
 }
 
@@ -318,8 +318,8 @@ export const openChannel = ({ pubkey, host, localamt, satPerByte, isPrivate }) =
         host,
         localamt,
         private: isPrivate || activeWalletSettings.type === 'local',
-        satPerByte
-      }
+        satPerByte,
+      },
     })
   )
 }
@@ -371,11 +371,11 @@ export const closeChannel = () => (dispatch, getState) => {
         data: {
           channel_point: {
             funding_txid,
-            output_index
+            output_index,
           },
           chan_id,
-          force: !active
-        }
+          force: !active,
+        },
       })
     )
   }
@@ -415,14 +415,14 @@ export const pushclosechannelstatus = () => dispatch => {
  */
 const throttledFetchChannels = throttle(dispatch => dispatch(fetchChannels()), 1000, {
   leading: true,
-  trailing: true
+  trailing: true,
 })
 
 // IPC event for channel graph data
 export const channelGraphData = (event, data) => (dispatch, getState) => {
   const { info, channels } = getState()
   const {
-    channelGraphData: { channel_updates, node_updates }
+    channelGraphData: { channel_updates, node_updates },
   } = data
 
   // Process node updates.
@@ -470,7 +470,7 @@ const ACTION_HANDLERS = {
   [SET_CHANNEL_VIEW_MODE]: (state, { viewMode }) => ({ ...state, viewMode }),
   [SET_CHANNEL_FORM]: (state, { form }) => ({
     ...state,
-    channelForm: Object.assign({}, state.channelForm, form)
+    channelForm: Object.assign({}, state.channelForm, form),
   }),
   [GET_CHANNELS]: state => ({ ...state, channelsLoading: true }),
   [RECEIVE_CHANNELS]: (state, { channels, pendingChannels, closedChannels }) => ({
@@ -478,7 +478,7 @@ const ACTION_HANDLERS = {
     channelsLoading: false,
     channels,
     pendingChannels,
-    closedChannels
+    closedChannels,
   }),
 
   [OPENING_CHANNEL]: state => ({ ...state, openingChannel: true }),
@@ -490,27 +490,27 @@ const ACTION_HANDLERS = {
 
   [CHANGE_CHANNEL_FILTER]: (state, { filter }) => ({
     ...state,
-    filter
+    filter,
   }),
 
   [ADD_LOADING_PUBKEY]: (state, { pubkey }) => ({
     ...state,
-    loadingChannelPubkeys: [pubkey, ...state.loadingChannelPubkeys]
+    loadingChannelPubkeys: [pubkey, ...state.loadingChannelPubkeys],
   }),
   [REMOVE_LOADING_PUBKEY]: (state, { pubkey }) => ({
     ...state,
     loadingChannelPubkeys: state.loadingChannelPubkeys.filter(
       loadingPubkey => loadingPubkey !== pubkey
-    )
+    ),
   }),
 
   [ADD_ClOSING_CHAN_ID]: (state, { chanId }) => ({
     ...state,
-    closingChannelIds: [chanId, ...state.closingChannelIds]
+    closingChannelIds: [chanId, ...state.closingChannelIds],
   }),
   [REMOVE_ClOSING_CHAN_ID]: (state, { chanId }) => ({
     ...state,
-    closingChannelIds: state.closingChannelIds.filter(closingChanId => closingChanId !== chanId)
+    closingChannelIds: state.closingChannelIds.filter(closingChanId => closingChanId !== chanId),
   }),
 
   [SET_SELECTED_CHANNEL]: (state, { selectedChannelId }) => ({ ...state, selectedChannelId }),
@@ -519,24 +519,24 @@ const ACTION_HANDLERS = {
   [RECEIVE_SUGGESTED_NODES]: (state, { suggestedNodes }) => ({
     ...state,
     suggestedNodesLoading: false,
-    suggestedNodes
+    suggestedNodes,
   }),
   [RECEIVE_SUGGESTED_NODES_ERROR]: state => ({
     ...state,
     suggestedNodesLoading: false,
     suggestedNodes: {
       mainnet: [],
-      testnet: []
-    }
+      testnet: [],
+    },
   }),
   [OPEN_CLOSE_CHANNEL_DIALOG]: state => ({
     ...state,
-    isCloseDialogOpen: true
+    isCloseDialogOpen: true,
   }),
   [CLOSE_CLOSE_CHANNEL_DIALOG]: state => ({
     ...state,
-    isCloseDialogOpen: false
-  })
+    isCloseDialogOpen: false,
+  }),
 }
 
 const channelsSelectors = {}
@@ -625,7 +625,7 @@ channelsSelectors.closingPendingChannelsRaw = createSelector(
   (pendingClosedChannels, pendingForcedClosedChannels, waitingCloseChannels) => [
     ...pendingClosedChannels,
     ...pendingForcedClosedChannels,
-    ...waitingCloseChannels
+    ...waitingCloseChannels,
   ]
 )
 
@@ -642,7 +642,7 @@ channelsSelectors.closingChannelIds = createSelector(
   channelsSelectors.closingPendingChannels,
   (closingChannelIds, closingPendingChannels) => [
     ...closingChannelIds,
-    ...closingPendingChannels.map(pendingChannel => pendingChannel.channel.chan_id)
+    ...closingPendingChannels.map(pendingChannel => pendingChannel.channel.chan_id),
   ]
 )
 
@@ -664,7 +664,7 @@ channelsSelectors.allChannels = createSelector(
       ...activeChannels,
       ...pendingOpenChannels,
       ...closingPendingChannels,
-      ...nonActiveChannels
+      ...nonActiveChannels,
     ]
   }
 )
@@ -690,7 +690,7 @@ channelsSelectors.allChannelsRaw = createSelector(
       ...pendingOpenChannels,
       ...pendingClosedChannels,
       ...pendingForceClosedChannels,
-      ...waitingCloseChannels
+      ...waitingCloseChannels,
     ]
   }
 )
@@ -766,14 +766,14 @@ const initialState = {
     pending_open_channels: [],
     pending_closing_channels: [],
     pending_force_closing_channels: [],
-    waiting_close_channels: []
+    waiting_close_channels: [],
   },
   closedChannels: [],
   channelForm: {
     isOpen: false,
     node_key: '',
     local_amt: '',
-    push_amt: ''
+    push_amt: '',
   },
   openingChannel: false,
   closingChannel: false,
@@ -786,7 +786,7 @@ const initialState = {
     { key: 'ACTIVE_CHANNELS', name: 'Online' },
     { key: 'NON_ACTIVE_CHANNELS', name: 'Offline' },
     { key: 'OPEN_PENDING_CHANNELS', name: 'Pending' },
-    { key: 'CLOSING_PENDING_CHANNELS', name: 'Closing' }
+    { key: 'CLOSING_PENDING_CHANNELS', name: 'Closing' },
   ],
 
   loadingChannelPubkeys: [],
@@ -809,9 +809,9 @@ const initialState = {
   // ****
   suggestedNodes: {
     mainnet: [],
-    testnet: []
+    testnet: [],
   },
-  suggestedNodesLoading: false
+  suggestedNodesLoading: false,
 }
 
 export default function channelsReducer(state = initialState, action) {
diff --git a/app/reducers/contactsform.js b/app/reducers/contactsform.js
index 3c7a9b5b4c4..30d7d4d8fd4 100644
--- a/app/reducers/contactsform.js
+++ b/app/reducers/contactsform.js
@@ -5,7 +5,7 @@ import { getNodeDisplayName, truncateNodePubkey } from './network'
 
 // Initial State
 const initialState = {
-  searchQuery: null
+  searchQuery: null,
 }
 
 // Constants
@@ -18,7 +18,7 @@ export const UPDATE_CONTACT_FORM_SEARCH_QUERY = 'UPDATE_CONTACT_FORM_SEARCH_QUER
 export function updateContactFormSearchQuery(searchQuery) {
   return {
     type: UPDATE_CONTACT_FORM_SEARCH_QUERY,
-    searchQuery
+    searchQuery,
   }
 }
 
@@ -26,7 +26,7 @@ export function updateContactFormSearchQuery(searchQuery) {
 // Action Handlers
 // ------------------------------------
 const ACTION_HANDLERS = {
-  [UPDATE_CONTACT_FORM_SEARCH_QUERY]: (state, { searchQuery }) => ({ ...state, searchQuery })
+  [UPDATE_CONTACT_FORM_SEARCH_QUERY]: (state, { searchQuery }) => ({ ...state, searchQuery }),
 }
 
 // ------------------------------------
@@ -68,7 +68,7 @@ const fromSuggestedToRegular = suggestedNodes =>
   suggestedNodes &&
   suggestedNodes.map(node => ({
     ...node,
-    addresses: [{ addr: node.host }]
+    addresses: [{ addr: node.host }],
   }))
 contactFormSelectors.filteredNetworkNodes = createSelector(
   networkNodesSelector,
diff --git a/app/reducers/index.js b/app/reducers/index.js
index 89eefef85a9..594ca6e193a 100644
--- a/app/reducers/index.js
+++ b/app/reducers/index.js
@@ -54,7 +54,7 @@ export default history => {
     settingsmenu,
     ticker,
     transaction,
-    wallet
+    wallet,
   })
 
   return (state, action) => {
diff --git a/app/reducers/info.js b/app/reducers/info.js
index 008ab88db60..a038ec40993 100644
--- a/app/reducers/info.js
+++ b/app/reducers/info.js
@@ -19,15 +19,15 @@ const networkInfo = {
       name: 'Mainnet',
       explorerUrl: 'https://blockstream.info',
       bitcoinJsNetwork: networks.bitcoin.mainnet,
-      unitPrefix: ''
+      unitPrefix: '',
     },
     testnet: {
       id: 'testnet',
       name: 'Testnet',
       explorerUrl: 'https://blockstream.info/testnet',
       bitcoinJsNetwork: networks.bitcoin.testnet,
-      unitPrefix: 't'
-    }
+      unitPrefix: 't',
+    },
   },
   litecoin: {
     mainnet: {
@@ -35,16 +35,16 @@ const networkInfo = {
       name: 'Mainnet',
       explorerUrl: 'https://insight.litecore.io',
       bitcoinJsNetwork: networks.litecoin.mainnet,
-      unitPrefix: ''
+      unitPrefix: '',
     },
     testnet: {
       id: 'testnet',
       name: 'Testnet',
       explorerUrl: 'https://testnet.litecore.io',
       bitcoinJsNetwork: networks.litecoin.testnet,
-      unitPrefix: 't'
-    }
-  }
+      unitPrefix: 't',
+    },
+  },
 }
 
 // ------------------------------------
@@ -52,7 +52,7 @@ const networkInfo = {
 // ------------------------------------
 export function getInfo() {
   return {
-    type: GET_INFO
+    type: GET_INFO,
   }
 }
 
@@ -116,7 +116,7 @@ export const receiveInfo = (event, data) => async (dispatch, getState) => {
 const ACTION_HANDLERS = {
   [SET_HAS_SYNCED]: (state, { hasSynced }) => ({
     ...state,
-    hasSynced
+    hasSynced,
   }),
   [GET_INFO]: state => ({ ...state, infoLoading: true }),
   [RECEIVE_INFO]: (state, { data }) => {
@@ -127,9 +127,9 @@ const ACTION_HANDLERS = {
       infoLoading: false,
       chain,
       network,
-      data
+      data,
     }
-  }
+  },
 }
 
 // ------------------------------------
@@ -141,7 +141,7 @@ const initialState = {
   chain: null,
   network: null,
   data: {},
-  networks: networkInfo
+  networks: networkInfo,
 }
 
 // Selectors
diff --git a/app/reducers/invoice.js b/app/reducers/invoice.js
index 71af32cf7c1..5ca55b2f7f2 100644
--- a/app/reducers/invoice.js
+++ b/app/reducers/invoice.js
@@ -44,39 +44,39 @@ const decorateInvoice = invoice => {
 export function searchInvoices(invoicesSearchText) {
   return {
     type: SEARCH_INVOICES,
-    invoicesSearchText
+    invoicesSearchText,
   }
 }
 
 export function setInvoice(invoice) {
   return {
     type: SET_INVOICE,
-    invoice
+    invoice,
   }
 }
 
 export function getInvoice() {
   return {
-    type: GET_INVOICE
+    type: GET_INVOICE,
   }
 }
 
 export function receiveInvoice(invoice) {
   return {
     type: RECEIVE_INVOICE,
-    invoice
+    invoice,
   }
 }
 
 export function getInvoices() {
   return {
-    type: GET_INVOICES
+    type: GET_INVOICES,
   }
 }
 
 export function sendInvoice() {
   return {
-    type: SEND_INVOICE
+    type: SEND_INVOICE,
   }
 }
 
@@ -116,7 +116,7 @@ export const createInvoice = (amount, currency, memo) => async (dispatch, getSta
   dispatch(
     send('lnd', {
       msg: 'createInvoice',
-      data: { value, memo, private: activeWalletSettings.type === 'local' }
+      data: { value, memo, private: activeWalletSettings.type === 'local' },
     })
   )
 }
@@ -172,7 +172,7 @@ const ACTION_HANDLERS = {
   [SEND_INVOICE]: state => ({ ...state, invoiceLoading: true }),
   [INVOICE_SUCCESSFUL]: state => ({
     ...state,
-    invoiceLoading: false
+    invoiceLoading: false,
   }),
   [INVOICE_FAILED]: state => ({ ...state, invoiceLoading: false, data: null }),
 
@@ -183,7 +183,7 @@ const ACTION_HANDLERS = {
         isNew = false
         return {
           ...invoice,
-          ...action.invoice
+          ...action.invoice,
         }
       }
       return invoice
@@ -194,7 +194,7 @@ const ACTION_HANDLERS = {
     }
 
     return { ...state, invoices: updatedInvoices }
-  }
+  },
 }
 
 const invoiceSelectors = {}
@@ -234,8 +234,8 @@ const initialState = {
   formInvoice: {
     payreq: '',
     r_hash: '',
-    amount: '0'
-  }
+    amount: '0',
+  },
 }
 
 export default function invoiceReducer(state = initialState, action) {
diff --git a/app/reducers/ipc.js b/app/reducers/ipc.js
index 9831589f8f3..f69750f7bc8 100644
--- a/app/reducers/ipc.js
+++ b/app/reducers/ipc.js
@@ -5,7 +5,7 @@ import {
   currentBlockHeight,
   fetchSeedSuccess,
   fetchSeedError,
-  lightningGrpcActive,
+  lightningWalletStarted,
   lndSyncStatus,
   lndStopped,
   lndStarted,
@@ -15,9 +15,9 @@ import {
   startLndError,
   walletCreated,
   walletUnlocked,
-  walletUnlockerGrpcActive,
+  walletUnlockerStarted,
   startNeutrino,
-  startWalletUnlocker
+  startWalletUnlocker,
 } from './lnd'
 import { receiveInfo } from './info'
 import { receiveAddress } from './address'
@@ -36,7 +36,7 @@ import {
   pushclosechannelerror,
   pushclosechannelstatus,
   channelGraphData,
-  channelGraphStatus
+  channelGraphStatus,
 } from './channels'
 import { lightningPaymentUri, queryRoutesSuccess, queryRoutesFailure } from './pay'
 import { receivePayments, paymentSuccessful, paymentFailed } from './payment'
@@ -46,7 +46,7 @@ import {
   receiveTransactions,
   transactionSuccessful,
   transactionFailed,
-  newTransaction
+  newTransaction,
 } from './transaction'
 
 import { receiveDescribeNetwork } from './network'
@@ -61,7 +61,7 @@ const ipc = createIpc({
   currentBlockHeight,
   lndBlockHeight,
   lndCfilterHeight,
-  lightningGrpcActive,
+  lightningWalletStarted,
   receiveInfo,
 
   receivePeers,
@@ -117,7 +117,7 @@ const ipc = createIpc({
   startLndError,
   lndStopped,
   lndStarted,
-  walletUnlockerGrpcActive,
+  walletUnlockerStarted,
   fetchSeedSuccess,
   fetchSeedError,
   walletCreated,
@@ -125,7 +125,7 @@ const ipc = createIpc({
   setUnlockWalletError,
 
   startNeutrino,
-  startWalletUnlocker
+  startWalletUnlocker,
 })
 
 export default ipc
diff --git a/app/reducers/lnd.js b/app/reducers/lnd.js
index 766d6614257..5ac56d51f13 100644
--- a/app/reducers/lnd.js
+++ b/app/reducers/lnd.js
@@ -83,7 +83,7 @@ export const startNeutrino = (event, value) => ({ type: START_NEUTRINO, value })
 export const startWalletUnlocker = (event, value) => ({ type: START_WALLET_UNLOCKER, value })
 
 // Connected to Lightning gRPC interface (lnd wallet is connected and unlocked)
-export const lightningGrpcActive = (event, lndConfig) => async dispatch => {
+export const lightningWalletStarted = (event, lndConfig) => async dispatch => {
   dispatch({ type: SET_LIGHTNING_WALLET_ACTIVE })
   // Once we we have established a connection, save the wallet settings
   // after connection was successfully established. This is especially important
@@ -115,7 +115,7 @@ export const refreshLndConnectURI = wallet => dispatch => {
 }
 
 // Connected to WalletUnlocker gRPC interface (lnd is ready to unlock or create wallet)
-export const walletUnlockerGrpcActive = () => async dispatch => {
+export const walletUnlockerStarted = () => async dispatch => {
   dispatch({ type: SET_WALLET_UNLOCKER_ACTIVE })
 
   // Let the onboarding process know that the wallet unlocker has started.
@@ -140,9 +140,9 @@ export const lndCfilterHeight = (event, height) => dispatch => {
 export const startLnd = options => async (dispatch, getState) => {
   const state = getState().lnd
   if (
-    state.walletUnlockerGrpcActive ||
-    state.lightningGrpcActive ||
-    state.startingLnd ||
+    state.isWalletUnlockerGrpcActive ||
+    state.isLightningGrpcActive ||
+    state.isStartingLnd ||
     state.stoppingLnd
   ) {
     return
@@ -179,7 +179,7 @@ export const startLndError = (event, errors) => dispatch => {
 
 export const stopLnd = () => async (dispatch, getState) => {
   const state = getState().lnd
-  if ((state.walletUnlockerGrpcActive || state.lightningGrpcActive) && !state.stoppingLnd) {
+  if ((state.isWalletUnlockerGrpcActive || state.isLightningGrpcActive) && !state.stoppingLnd) {
     dispatch({ type: STOPPING_LND })
     dispatch(send('stopLnd'))
   }
@@ -198,7 +198,7 @@ export const unlockWallet = password => async dispatch => {
   dispatch(
     send('walletUnlocker', {
       msg: 'unlockWallet',
-      data: { wallet_password: password }
+      data: { wallet_password: password },
     })
   )
 }
@@ -211,16 +211,16 @@ export const lndWalletUnlockerStarted = () => (dispatch, getState) => {
   const state = getState()
 
   // Handle generate seed.
-  if (state.lnd.fetchingSeed) {
+  if (state.lnd.isFetchingSeed) {
     dispatch(send('walletUnlocker', { msg: 'genSeed' }))
   }
 
   // Handle unlock wallet.
-  else if (state.lnd.unlockingWallet) {
+  else if (state.lnd.isUnlockingWallet) {
     dispatch(
       send('walletUnlocker', {
         msg: 'unlockWallet',
-        data: { wallet_password: state.onboarding.password }
+        data: { wallet_password: state.onboarding.password },
       })
     )
   }
@@ -232,8 +232,8 @@ export const lndWalletUnlockerStarted = () => (dispatch, getState) => {
         msg: 'initWallet',
         data: {
           wallet_password: state.onboarding.password,
-          cipher_seed_mnemonic: state.onboarding.seed
-        }
+          cipher_seed_mnemonic: state.onboarding.seed,
+        },
       })
     )
   }
@@ -246,8 +246,8 @@ export const lndWalletUnlockerStarted = () => (dispatch, getState) => {
         data: {
           wallet_password: state.onboarding.password,
           cipher_seed_mnemonic: state.onboarding.seed,
-          recovery_window: 250
-        }
+          recovery_window: 250,
+        },
       })
     )
   }
@@ -277,7 +277,7 @@ export const fetchSeed = () => async dispatch => {
         id: `tmp`,
         type: 'local',
         chain: 'bitcoin',
-        network: 'testnet'
+        network: 'testnet',
       })
     )
   } catch (error) {
@@ -307,7 +307,7 @@ export const createNewWallet = () => async (dispatch, getState) => {
     network: 'testnet',
     autopilot: state.onboarding.autopilot,
     alias: state.onboarding.alias,
-    name: state.onboarding.name
+    name: state.onboarding.name,
   }
 
   // Save the wallet config.
@@ -328,7 +328,7 @@ export const recoverOldWallet = () => async (dispatch, getState) => {
     network: 'testnet',
     autopilot: state.onboarding.autopilot,
     alias: state.onboarding.alias,
-    name: state.onboarding.name
+    name: state.onboarding.name,
   }
 
   // Save the wallet config.
@@ -341,7 +341,7 @@ export const recoverOldWallet = () => async (dispatch, getState) => {
 
 export const startActiveWallet = () => async (dispatch, getState) => {
   const state = getState()
-  if (!state.lnd.lndStarted && !state.lnd.startingLnd) {
+  if (!state.lnd.lndStarted && !state.lnd.isStartingLnd) {
     const activeWalletSettings = walletSelectors.activeWalletSettings(state)
     if (activeWalletSettings) {
       await dispatch(startLnd(activeWalletSettings))
@@ -353,16 +353,16 @@ export const startActiveWallet = () => async (dispatch, getState) => {
 // Action Handlers
 // ------------------------------------
 const ACTION_HANDLERS = {
-  [FETCH_SEED]: state => ({ ...state, fetchingSeed: true }),
+  [FETCH_SEED]: state => ({ ...state, isFetchingSeed: true }),
   [FETCH_SEED_SUCCESS]: state => ({
     ...state,
-    fetchingSeed: false,
-    fetchSeedError: ''
+    isFetchingSeed: false,
+    fetchSeedError: '',
   }),
   [FETCH_SEED_ERROR]: (state, { error }) => ({
     ...state,
-    fetchingSeed: false,
-    fetchSeedError: error
+    isFetchingSeed: false,
+    fetchSeedError: error,
   }),
 
   [SET_SYNC_STATUS_PENDING]: state => ({ ...state, syncStatus: 'pending' }),
@@ -372,91 +372,91 @@ const ACTION_HANDLERS = {
 
   [RECEIVE_CURRENT_BLOCK_HEIGHT]: (state, { blockHeight }) => ({
     ...state,
-    blockHeight
+    blockHeight,
   }),
   [RECEIVE_LND_BLOCK_HEIGHT]: (state, { lndBlockHeight }) => ({
     ...state,
     lndBlockHeight,
-    lndFirstBlockHeight: state.lndFirstBlockHeight || lndBlockHeight
+    lndFirstBlockHeight: state.lndFirstBlockHeight || lndBlockHeight,
   }),
   [RECEIVE_LND_CFILTER_HEIGHT]: (state, { lndCfilterHeight }) => ({
     ...state,
     lndCfilterHeight,
-    lndFirstCfilterHeight: state.lndFirstCfilterHeight || lndCfilterHeight
+    lndFirstCfilterHeight: state.lndFirstCfilterHeight || lndCfilterHeight,
   }),
 
   [STARTING_LND]: state => ({
     ...state,
-    startingLnd: true,
-    lndStarted: false
+    isStartingLnd: true,
+    lndStarted: false,
   }),
   [LND_STARTED]: state => ({
     ...state,
-    startingLnd: false,
-    lndStarted: true
+    isStartingLnd: false,
+    lndStarted: true,
   }),
   [SET_START_LND_ERROR]: (state, { errors }) => ({
     ...state,
-    startingLnd: false,
-    startLndError: errors
+    isStartingLnd: false,
+    startLndError: errors,
   }),
   [CLEAR_START_LND_ERROR]: state => ({
     ...state,
-    startLndError: null
+    startLndError: null,
   }),
   [SET_WALLET_UNLOCKER_ACTIVE]: state => ({
     ...state,
-    startingLnd: false,
-    walletUnlockerGrpcActive: true,
-    lightningGrpcActive: false
+    isStartingLnd: false,
+    isWalletUnlockerGrpcActive: true,
+    isLightningGrpcActive: false,
   }),
   [SET_LIGHTNING_WALLET_ACTIVE]: state => ({
     ...state,
-    startingLnd: false,
-    lightningGrpcActive: true,
-    walletUnlockerGrpcActive: false
+    isStartingLnd: false,
+    isLightningGrpcActive: true,
+    isWalletUnlockerGrpcActive: false,
   }),
 
   [STOPPING_LND]: state => ({
     ...state,
-    stoppingLnd: true
+    stoppingLnd: true,
   }),
   [LND_STOPPED]: state => ({
     ...state,
-    ...initialState
+    ...initialState,
   }),
 
   [CREATING_NEW_WALLET]: state => ({ ...state, creatingNewWallet: true }),
   [RECOVERING_OLD_WALLET]: state => ({ ...state, recoveringOldWallet: true }),
-  [UNLOCKING_WALLET]: state => ({ ...state, unlockingWallet: true }),
+  [UNLOCKING_WALLET]: state => ({ ...state, isUnlockingWallet: true }),
   [WALLET_UNLOCKED]: state => ({
     ...state,
-    unlockingWallet: false,
-    unlockWalletError: ''
+    isUnlockingWallet: false,
+    unlockWalletError: '',
   }),
   [SET_UNLOCK_WALLET_ERROR]: (state, { unlockWalletError }) => ({
     ...state,
-    unlockingWallet: false,
-    unlockWalletError
+    isUnlockingWallet: false,
+    unlockWalletError,
   }),
 
   [START_NEUTRINO]: (state, { value }) => ({ ...state, startNeutrino: value }),
-  [START_WALLET_UNLOCKER]: (state, { value }) => ({ ...state, startWalletUnlocker: value })
+  [START_WALLET_UNLOCKER]: (state, { value }) => ({ ...state, startWalletUnlocker: value }),
 }
 
 // ------------------------------------
 // Reducer
 // ------------------------------------
 const initialState = {
-  fetchingSeed: false,
-  startingLnd: false,
+  isFetchingSeed: false,
+  isStartingLnd: false,
   stoppingLnd: false,
   lndStarted: false,
   creatingNewWallet: false,
   recoveringOldWallet: false,
-  unlockingWallet: false,
-  walletUnlockerGrpcActive: false,
-  lightningGrpcActive: false,
+  isUnlockingWallet: false,
+  isWalletUnlockerGrpcActive: false,
+  isLightningGrpcActive: false,
   unlockWalletError: null,
   startLndError: null,
   fetchSeedError: null,
@@ -465,7 +465,7 @@ const initialState = {
   lndBlockHeight: 0,
   lndFirstBlockHeight: 0,
   lndCfilterHeight: 0,
-  lndFirstCfilterHeight: 0
+  lndFirstCfilterHeight: 0,
 }
 
 // ------------------------------------
@@ -478,7 +478,7 @@ const lndFirstBlockHeightSelector = state => state.lnd.lndFirstBlockHeight
 const lndCfilterHeightSelector = state => state.lnd.lndCfilterHeight
 const lndFirstCfilterHeightSelector = state => state.lnd.lndFirstCfilterHeight
 const startLndErrorSelector = state => state.lnd.startLndError
-const isStartingLndSelector = state => state.lnd.startingLnd
+const isStartingLndSelector = state => state.lnd.isStartingLnd
 const isStartingNeutrinoSelector = state => state.lnd.startNeutrino
 const isStartingUnlockerSelector = state => state.lnd.startWalletUnlocker
 
diff --git a/app/reducers/locale.js b/app/reducers/locale.js
index 90756500fe5..d3449c860af 100644
--- a/app/reducers/locale.js
+++ b/app/reducers/locale.js
@@ -15,7 +15,7 @@ export const setLocale = locale => (dispatch, getState) => {
   dispatch(
     updateIntl({
       locale,
-      messages: state.locale[locale]
+      messages: state.locale[locale],
     })
   )
 
@@ -49,7 +49,7 @@ export const initCurrency = () => async (dispatch, getState) => {
 }
 
 export const localeSelectors = {
-  currentLocale: state => state.intl.locale
+  currentLocale: state => state.intl.locale,
 }
 
 // ------------------------------------
diff --git a/app/reducers/modal.js b/app/reducers/modal.js
index d98256c5497..dc3b9252e4a 100644
--- a/app/reducers/modal.js
+++ b/app/reducers/modal.js
@@ -4,7 +4,7 @@ import genId from 'lib/utils/genId'
 // Initial State
 // ------------------------------------
 const initialState = {
-  modals: []
+  modals: [],
 }
 
 // ------------------------------------
@@ -19,18 +19,18 @@ export const CLOSE_MODAL = 'CLOSE_MODAL'
 export function openModal(type) {
   const modal = {
     id: genId(),
-    type
+    type,
   }
   return {
     type: OPEN_MODAL,
-    modal
+    modal,
   }
 }
 
 export function closeModal(id) {
   return {
     type: CLOSE_MODAL,
-    id
+    id,
   }
 }
 
@@ -40,20 +40,20 @@ export function closeModal(id) {
 const ACTION_HANDLERS = {
   [OPEN_MODAL]: (state, { modal }) => ({
     ...state,
-    modals: [...state.modals, modal]
+    modals: [...state.modals, modal],
   }),
   [CLOSE_MODAL]: (state, { id }) => {
     if (id) {
       return {
         ...state,
-        modals: state.modals.filter(item => item.id !== id)
+        modals: state.modals.filter(item => item.id !== id),
       }
     }
     return {
       ...state,
-      modals: [...state.modals.slice(0, -1)]
+      modals: [...state.modals.slice(0, -1)],
     }
-  }
+  },
 }
 
 // ------------------------------------
diff --git a/app/reducers/network.js b/app/reducers/network.js
index 876f3342726..c1077ee5729 100644
--- a/app/reducers/network.js
+++ b/app/reducers/network.js
@@ -27,13 +27,13 @@ export const truncateNodePubkey = pubkey => pubkey.substring(0, 10)
 export function updateNodeData(nodeData) {
   return {
     type: UPDATE_NODE_DATA,
-    nodeData
+    nodeData,
   }
 }
 
 export function getDescribeNetwork() {
   return {
-    type: GET_DESCRIBE_NETWORK
+    type: GET_DESCRIBE_NETWORK,
   }
 }
 
@@ -64,14 +64,14 @@ const mergeNodeUpdates = (state, nodeData) => {
           {
             ...originalNodes[index],
             ...nodeData,
-            last_update: Math.round(new Date() / 1000)
+            last_update: Math.round(new Date() / 1000),
           },
-          ...originalNodes.slice(index + 1)
+          ...originalNodes.slice(index + 1),
         ]
 
   return {
     ...state,
-    nodes
+    nodes,
   }
 }
 
@@ -85,8 +85,8 @@ const ACTION_HANDLERS = {
     ...state,
     networkLoading: false,
     nodes,
-    edges
-  })
+    edges,
+  }),
 }
 
 // ------------------------------------
@@ -95,7 +95,7 @@ const ACTION_HANDLERS = {
 const initialState = {
   networkLoading: false,
   nodes: [],
-  edges: []
+  edges: [],
 }
 
 // ------------------------------------
diff --git a/app/reducers/notification.js b/app/reducers/notification.js
index bed1a3ae764..06d023e443a 100644
--- a/app/reducers/notification.js
+++ b/app/reducers/notification.js
@@ -5,7 +5,7 @@ import genId from 'lib/utils/genId'
 // Initial State
 // ------------------------------------
 const initialState = {
-  notifications: []
+  notifications: [],
 }
 
 // ------------------------------------
@@ -22,12 +22,12 @@ export const enqueueNotification = (message, variant, timeout) => async dispatch
   const notification = {
     id: genId(),
     message,
-    variant
+    variant,
   }
 
   const notificationAction = dispatch({
     type: ENQUEUE_NOTIFICATION,
-    notification
+    notification,
   })
   // Set a timer to clear the error after 10 seconds.
   if (timeout) {
@@ -41,7 +41,7 @@ export const enqueueNotification = (message, variant, timeout) => async dispatch
 export function removeNotification(id) {
   return {
     type: REMOVE_NOTIFICATION,
-    id
+    id,
   }
 }
 
@@ -62,12 +62,12 @@ export const showWarning = (message, delay = NOTIFICATION_TIMEOUT) =>
 const ACTION_HANDLERS = {
   [ENQUEUE_NOTIFICATION]: (state, { notification }) => ({
     ...state,
-    notifications: [...state.notifications, notification]
+    notifications: [...state.notifications, notification],
   }),
   [REMOVE_NOTIFICATION]: (state, { id }) => ({
     ...state,
-    notifications: state.notifications.filter(item => item.id !== id)
-  })
+    notifications: state.notifications.filter(item => item.id !== id),
+  }),
 }
 
 // ------------------------------------
diff --git a/app/reducers/onboarding.js b/app/reducers/onboarding.js
index 35e9a6ecbd0..a4b80b4778e 100644
--- a/app/reducers/onboarding.js
+++ b/app/reducers/onboarding.js
@@ -35,90 +35,90 @@ export const resetOnboarding = () => dispatch => {
 
 export function onboardingStarted() {
   return {
-    type: ONBOARDING_STARTED
+    type: ONBOARDING_STARTED,
   }
 }
 
 export function onboardingFinished() {
   return {
-    type: ONBOARDING_FINISHED
+    type: ONBOARDING_FINISHED,
   }
 }
 
 export function setConnectionString(connectionString) {
   return {
     type: SET_CONNECTION_URI,
-    connectionString
+    connectionString,
   }
 }
 
 export function setConnectionType(connectionType) {
   return {
     type: SET_CONNECTION_TYPE,
-    connectionType
+    connectionType,
   }
 }
 
 export function setConnectionHost(connectionHost) {
   return {
     type: SET_CONNECTION_HOST,
-    connectionHost
+    connectionHost,
   }
 }
 
 export function setConnectionCert(connectionCert) {
   return {
     type: SET_CONNECTION_CERT,
-    connectionCert
+    connectionCert,
   }
 }
 
 export function setConnectionMacaroon(connectionMacaroon) {
   return {
     type: SET_CONNECTION_MACAROON,
-    connectionMacaroon
+    connectionMacaroon,
   }
 }
 
 export function setAlias(alias) {
   return {
     type: SET_ALIAS,
-    alias
+    alias,
   }
 }
 
 export function setName(name) {
   return {
     type: SET_NAME,
-    name
+    name,
   }
 }
 
 export function setAutopilot(autopilot) {
   return {
     type: SET_AUTOPILOT,
-    autopilot
+    autopilot,
   }
 }
 
 export function setPassword(password) {
   return {
     type: SET_PASSWORD,
-    password
+    password,
   }
 }
 
 export function setSeed(seed) {
   return {
     type: SET_SEED,
-    seed
+    seed,
   }
 }
 
 export function setLndconnect(lndConnect) {
   return {
     type: SET_LNDCONNECT,
-    lndConnect
+    lndConnect,
   }
 }
 
@@ -187,15 +187,15 @@ const ACTION_HANDLERS = {
   [SET_ALIAS]: (state, { alias }) => ({ ...state, alias }),
   [SET_NAME]: (state, { name }) => ({ ...state, name }),
   [SET_AUTOPILOT]: (state, { autopilot }) => ({ ...state, autopilot }),
-  [SET_SEED]: (state, { seed }) => ({ ...state, seed, fetchingSeed: false }),
+  [SET_SEED]: (state, { seed }) => ({ ...state, seed, isFetchingSeed: false }),
   [SET_LNDCONNECT]: (state, { lndConnect }) => ({ ...state, lndConnect }),
   [SET_PASSWORD]: (state, { password }) => ({ ...state, password }),
-  [ONBOARDING_STARTED]: state => ({ ...state, onboarding: true, onboarded: false }),
-  [ONBOARDING_FINISHED]: state => ({ ...state, onboarding: false, onboarded: true }),
+  [ONBOARDING_STARTED]: state => ({ ...state, onboarding: true, isOnboarded: false }),
+  [ONBOARDING_FINISHED]: state => ({ ...state, onboarding: false, isOnboarded: true }),
   [VALIDATING_HOST]: (state, { validatingHost }) => ({ ...state, validatingHost }),
   [VALIDATING_CERT]: (state, { validatingCert }) => ({ ...state, validatingCert }),
   [VALIDATING_MACAROON]: (state, { validatingMacaroon }) => ({ ...state, validatingMacaroon }),
-  [RESET_ONBOARDING]: state => ({ ...state, ...initialState })
+  [RESET_ONBOARDING]: state => ({ ...state, ...initialState }),
 }
 
 // ------------------------------------
@@ -204,7 +204,7 @@ const ACTION_HANDLERS = {
 
 const initialState = {
   onboarding: false,
-  onboarded: false,
+  isOnboarded: false,
   autopilot: true,
   validatingHost: false,
   validatingCert: false,
@@ -218,7 +218,7 @@ const initialState = {
   alias: '',
   name: '',
   password: '',
-  seed: []
+  seed: [],
 }
 
 // ------------------------------------
diff --git a/app/reducers/pay.js b/app/reducers/pay.js
index 0cf1c31dd97..8ac8dd398ec 100644
--- a/app/reducers/pay.js
+++ b/app/reducers/pay.js
@@ -45,7 +45,7 @@ export const queryRoutesFailure = () => dispatch => {
 export function setPayReq(payReq) {
   return {
     type: SET_PAY_REQ,
-    payReq
+    payReq,
   }
 }
 
@@ -66,44 +66,44 @@ const ACTION_HANDLERS = {
     ...state,
     isQueryingFees: true,
     onchainFees: {},
-    queryFeesError: null
+    queryFeesError: null,
   }),
   [QUERY_FEES_SUCCESS]: (state, { onchainFees }) => ({
     ...state,
     isQueryingFees: false,
     onchainFees,
-    queryFeesError: null
+    queryFeesError: null,
   }),
   [QUERY_FEES_FAILURE]: (state, { error }) => ({
     ...state,
     isQueryingFees: false,
     onchainFees: {},
-    queryFeesError: error
+    queryFeesError: error,
   }),
   [QUERY_ROUTES]: (state, { pubKey }) => ({
     ...state,
     isQueryingRoutes: true,
     pubKey,
     queryRoutesError: null,
-    routes: []
+    routes: [],
   }),
   [QUERY_ROUTES_SUCCESS]: (state, { routes }) => ({
     ...state,
     isQueryingRoutes: false,
     queryRoutesError: null,
-    routes
+    routes,
   }),
   [QUERY_ROUTES_FAILURE]: (state, { error }) => ({
     ...state,
     isQueryingRoutes: false,
     pubKey: null,
     queryRoutesError: error,
-    routes: []
+    routes: [],
   }),
   [SET_PAY_REQ]: (state, { payReq }) => ({
     ...state,
-    payReq
-  })
+    payReq,
+  }),
 }
 
 // ------------------------------------
@@ -115,13 +115,13 @@ const initialState = {
   onchainFees: {
     fastestFee: null,
     halfHourFee: null,
-    hourFee: null
+    hourFee: null,
   },
   payReq: null,
   pubKey: null,
   queryFeesError: null,
   queryRoutesError: null,
-  routes: []
+  routes: [],
 }
 
 // ------------------------------------
diff --git a/app/reducers/payment.js b/app/reducers/payment.js
index d49e09175f7..a1b115b1a64 100644
--- a/app/reducers/payment.js
+++ b/app/reducers/payment.js
@@ -31,24 +31,24 @@ const decoratePayment = payment => {
 export function setPayment(payment) {
   return {
     type: SET_PAYMENT,
-    payment
+    payment,
   }
 }
 
 export function getPayments() {
   return {
-    type: GET_PAYMENTS
+    type: GET_PAYMENTS,
   }
 }
 
 export function sendPayment(data) {
   const payment = Object.assign({}, data, {
     status: 'sending',
-    timestamp: Math.round(new Date() / 1000)
+    timestamp: Math.round(new Date() / 1000),
   })
   return {
     type: SEND_PAYMENT,
-    payment
+    payment,
   }
 }
 
@@ -118,7 +118,7 @@ const ACTION_HANDLERS = {
   [SET_PAYMENT]: (state, { payment }) => ({ ...state, payment }),
   [SEND_PAYMENT]: (state, { payment }) => ({
     ...state,
-    paymentsSending: [...state.paymentsSending, payment]
+    paymentsSending: [...state.paymentsSending, payment],
   }),
   [PAYMENT_SUCCESSFUL]: (state, { paymentRequest }) => {
     return {
@@ -129,9 +129,9 @@ const ACTION_HANDLERS = {
         }
         return {
           ...item,
-          status: 'successful'
+          status: 'successful',
         }
-      })
+      }),
     }
   },
   [PAYMENT_FAILED]: (state, { paymentRequest, error }) => {
@@ -144,17 +144,17 @@ const ACTION_HANDLERS = {
         return {
           ...item,
           status: 'failed',
-          error
+          error,
         }
-      })
+      }),
     }
   },
   [PAYMENT_COMPLETE]: (state, { paymentRequest }) => {
     return {
       ...state,
-      paymentsSending: state.paymentsSending.filter(item => item.paymentRequest !== paymentRequest)
+      paymentsSending: state.paymentsSending.filter(item => item.paymentRequest !== paymentRequest),
     }
-  }
+  },
 }
 
 const modalPaymentSelector = state => state.payment.payment
@@ -175,7 +175,7 @@ const initialState = {
   paymentLoading: false,
   payment: null,
   payments: [],
-  paymentsSending: []
+  paymentsSending: [],
 }
 
 export default function paymentReducer(state = initialState, action) {
diff --git a/app/reducers/peers.js b/app/reducers/peers.js
index a81f530d4e7..1ea6d38a03e 100644
--- a/app/reducers/peers.js
+++ b/app/reducers/peers.js
@@ -26,46 +26,46 @@ export const RECEIVE_PEERS = 'RECEIVE_PEERS'
 // ------------------------------------
 export function connectPeer() {
   return {
-    type: CONNECT_PEER
+    type: CONNECT_PEER,
   }
 }
 
 export function disconnectPeer() {
   return {
-    type: DISCONNECT_PEER
+    type: DISCONNECT_PEER,
   }
 }
 
 export function disconnectFailure() {
   return {
-    type: DISCONNECT_FAILURE
+    type: DISCONNECT_FAILURE,
   }
 }
 
 export function setPeerForm(form) {
   return {
     type: SET_PEER_FORM,
-    form
+    form,
   }
 }
 
 export function setPeer(peer) {
   return {
     type: SET_PEER,
-    peer
+    peer,
   }
 }
 
 export function getPeers() {
   return {
-    type: GET_PEERS
+    type: GET_PEERS,
   }
 }
 
 export function updateSearchQuery(searchQuery) {
   return {
     type: UPDATE_SEARCH_QUERY,
-    searchQuery
+    searchQuery,
   }
 }
 
@@ -113,7 +113,7 @@ const ACTION_HANDLERS = {
     ...state,
     disconnecting: false,
     peer: null,
-    peers: state.peers.filter(peer => peer.pub_key !== pubkey)
+    peers: state.peers.filter(peer => peer.pub_key !== pubkey),
   }),
   [DISCONNECT_FAILURE]: state => ({ ...state, disconnecting: false }),
 
@@ -122,13 +122,13 @@ const ACTION_HANDLERS = {
     ...state,
     connecting: false,
     peerForm: { pubkey: '', host: '', isOpen: false },
-    peers: [...state.peers, peer]
+    peers: [...state.peers, peer],
   }),
   [CONNECT_FAILURE]: state => ({ ...state, connecting: false }),
 
   [SET_PEER_FORM]: (state, { form }) => ({
     ...state,
-    peerForm: Object.assign({}, state.peerForm, form)
+    peerForm: Object.assign({}, state.peerForm, form),
   }),
 
   [SET_PEER]: (state, { peer }) => ({ ...state, peer }),
@@ -136,7 +136,7 @@ const ACTION_HANDLERS = {
   [GET_PEERS]: state => ({ ...state, peersLoading: true }),
   [RECEIVE_PEERS]: (state, { peers }) => ({ ...state, peersLoading: false, peers }),
 
-  [UPDATE_SEARCH_QUERY]: (state, { searchQuery }) => ({ ...state, searchQuery })
+  [UPDATE_SEARCH_QUERY]: (state, { searchQuery }) => ({ ...state, searchQuery }),
 }
 
 const peersSelectors = {}
@@ -168,11 +168,11 @@ const initialState = {
   peerForm: {
     isOpen: false,
     pubkey: '',
-    host: ''
+    host: '',
   },
   searchQuery: '',
   connecting: false,
-  disconnecting: false
+  disconnecting: false,
 }
 
 export default function peersReducer(state = initialState, action) {
diff --git a/app/reducers/settings.js b/app/reducers/settings.js
index 95e06496ea6..e248b9caa71 100644
--- a/app/reducers/settings.js
+++ b/app/reducers/settings.js
@@ -10,7 +10,7 @@ export const SET_SETTING = 'SET_SETTING'
 export function setSettings(settings) {
   return {
     type: SET_SETTINGS,
-    settings
+    settings,
   }
 }
 
@@ -18,7 +18,7 @@ export function setSetting(key, value) {
   return {
     type: SET_SETTING,
     key,
-    value
+    value,
   }
 }
 
@@ -47,12 +47,12 @@ const ACTION_HANDLERS = {
     ...settings.reduce((obj, item) => {
       obj[item.key] = item.value
       return obj
-    }, {})
+    }, {}),
   }),
   [SET_SETTING]: (state, { key, value }) => ({
     ...state,
-    ...{ ...state.settings, [key]: value }
-  })
+    ...{ ...state.settings, [key]: value },
+  }),
 }
 
 // ------------------------------------
@@ -60,7 +60,7 @@ const ACTION_HANDLERS = {
 // ------------------------------------
 const initialState = {
   isSettingsOpen: false,
-  activeSubMenu: null
+  activeSubMenu: null,
 }
 
 export default function settingsReducer(state = initialState, action) {
diff --git a/app/reducers/settingsmenu.js b/app/reducers/settingsmenu.js
index dc8b397c9fc..2ddc5c9c353 100644
--- a/app/reducers/settingsmenu.js
+++ b/app/reducers/settingsmenu.js
@@ -11,26 +11,26 @@ export const DISABLE_SUBMENU = 'DISABLE_SUBMENU'
 // ------------------------------------
 export function openSettings() {
   return {
-    type: OPEN_SETTINGS
+    type: OPEN_SETTINGS,
   }
 }
 
 export function closeSettings() {
   return {
-    type: CLOSE_SETTINGS
+    type: CLOSE_SETTINGS,
   }
 }
 
 export function setActiveSubMenu(activeSubMenu) {
   return {
     type: SET_ACTIVE_SUBMENU,
-    activeSubMenu
+    activeSubMenu,
   }
 }
 
 export function disableSubMenu() {
   return {
-    type: DISABLE_SUBMENU
+    type: DISABLE_SUBMENU,
   }
 }
 
@@ -41,7 +41,7 @@ const ACTION_HANDLERS = {
   [OPEN_SETTINGS]: state => ({ ...state, isSettingsOpen: true }),
   [CLOSE_SETTINGS]: state => ({ ...state, isSettingsOpen: false, activeSubMenu: null }),
   [SET_ACTIVE_SUBMENU]: (state, { activeSubMenu }) => ({ ...state, activeSubMenu }),
-  [DISABLE_SUBMENU]: state => ({ ...state, activeSubMenu: null })
+  [DISABLE_SUBMENU]: state => ({ ...state, activeSubMenu: null }),
 }
 
 // ------------------------------------
@@ -49,7 +49,7 @@ const ACTION_HANDLERS = {
 // ------------------------------------
 const initialState = {
   isSettingsOpen: false,
-  activeSubMenu: null
+  activeSubMenu: null,
 }
 
 export default function settingsReducer(state = initialState, action) {
diff --git a/app/reducers/theme.js b/app/reducers/theme.js
index 24b39d2f2a2..271bacfc541 100644
--- a/app/reducers/theme.js
+++ b/app/reducers/theme.js
@@ -27,7 +27,7 @@ export const setTheme = currentTheme => async dispatch => {
   // Persist the new theme in the store.
   dispatch({
     type: SET_THEME,
-    currentTheme
+    currentTheme,
   })
 
   // Persist the new theme setting.
@@ -38,7 +38,7 @@ export const setTheme = currentTheme => async dispatch => {
 // Action Handlers
 // ------------------------------------
 const ACTION_HANDLERS = {
-  [SET_THEME]: (state, { currentTheme }) => ({ ...state, currentTheme })
+  [SET_THEME]: (state, { currentTheme }) => ({ ...state, currentTheme }),
 }
 
 // ------------------------------------
@@ -71,7 +71,7 @@ export { themeSelectors }
 
 const initialState = {
   currentTheme: null,
-  themes: { dark, light }
+  themes: { dark, light },
 }
 
 export default function themeReducer(state = initialState, action) {
diff --git a/app/reducers/ticker.js b/app/reducers/ticker.js
index 9ce0f344b1b..093a31bff0f 100644
--- a/app/reducers/ticker.js
+++ b/app/reducers/ticker.js
@@ -17,13 +17,13 @@ export const RECIEVE_TICKERS = 'RECIEVE_TICKERS'
 // Map for crypto codes to crypto tickers
 const DEFAULT_CRYPTO_UNITS = {
   bitcoin: 'btc',
-  litecoin: 'ltc'
+  litecoin: 'ltc',
 }
 
 // Map for crypto names to crypto tickers
 const CRYPTO_NAMES = {
   bitcoin: 'Bitcoin',
-  litecoin: 'Litecoin'
+  litecoin: 'Litecoin',
 }
 
 // ------------------------------------
@@ -45,7 +45,7 @@ export const initTickers = () => async (dispatch, getState) => {
 export const setCurrency = unit => async (dispatch, getState) => {
   dispatch({
     type: SET_CURRENCY,
-    currency: unit
+    currency: unit,
   })
 
   const state = getState()
@@ -62,7 +62,7 @@ export const setCurrency = unit => async (dispatch, getState) => {
 export function setCrypto(crypto) {
   return {
     type: SET_CRYPTO,
-    crypto
+    crypto,
   }
 }
 
@@ -70,7 +70,7 @@ export const setFiatTicker = fiatTicker => async dispatch => {
   // Persist the new fiatTicker in the store.
   dispatch({
     type: SET_FIAT_TICKER,
-    fiatTicker
+    fiatTicker,
   })
 
   // Persist the new fiatTicker saetting.
@@ -79,7 +79,7 @@ export const setFiatTicker = fiatTicker => async dispatch => {
 
 export function getTickers() {
   return {
-    type: GET_TICKERS
+    type: GET_TICKERS,
   }
 }
 
@@ -87,7 +87,7 @@ export function recieveTickers({ btcTicker, ltcTicker }) {
   return {
     type: RECIEVE_TICKERS,
     btcTicker,
-    ltcTicker
+    ltcTicker,
   }
 }
 
@@ -124,8 +124,8 @@ const ACTION_HANDLERS = {
     ...state,
     tickerLoading: false,
     btcTicker,
-    ltcTicker
-  })
+    ltcTicker,
+  }),
 }
 
 // Selectors
@@ -172,7 +172,7 @@ tickerSelectors.currencyFilters = createSelector(
     }
     return currencyFilters[crypto].map(item => ({
       ...item,
-      name: `${networkInfo.unitPrefix}${item.name}`
+      name: `${networkInfo.unitPrefix}${item.name}`,
     }))
   }
 )
@@ -208,32 +208,32 @@ const initialState = {
     bitcoin: [
       {
         key: 'btc',
-        name: 'BTC'
+        name: 'BTC',
       },
       {
         key: 'bits',
-        name: 'bits'
+        name: 'bits',
       },
       {
         key: 'sats',
-        name: 'satoshis'
-      }
+        name: 'satoshis',
+      },
     ],
     litecoin: [
       {
         key: 'ltc',
-        name: 'LTC'
+        name: 'LTC',
       },
       {
         key: 'phots',
-        name: 'photons'
+        name: 'photons',
       },
       {
         key: 'lits',
-        name: 'litoshis'
-      }
-    ]
-  }
+        name: 'litoshis',
+      },
+    ],
+  },
 }
 
 export default function tickerReducer(state = initialState, action) {
diff --git a/app/reducers/transaction.js b/app/reducers/transaction.js
index c8d95532391..895b8af1363 100644
--- a/app/reducers/transaction.js
+++ b/app/reducers/transaction.js
@@ -35,18 +35,18 @@ const decorateTransaction = transaction => {
 // ------------------------------------
 export function getTransactions() {
   return {
-    type: GET_TRANSACTIONS
+    type: GET_TRANSACTIONS,
   }
 }
 
 export function sendTransaction(data) {
   const transaction = Object.assign({}, data, {
     status: 'sending',
-    timestamp: Math.round(new Date() / 1000)
+    timestamp: Math.round(new Date() / 1000),
   })
   return {
     type: SEND_TRANSACTION,
-    transaction
+    transaction,
   }
 }
 
@@ -88,7 +88,7 @@ export const sendCoins = ({ value, addr, currency, targetConf, satPerByte }) =>
   dispatch(
     send('lnd', {
       msg: 'sendCoins',
-      data
+      data,
     })
   )
   dispatch(sendTransaction(data))
@@ -166,16 +166,16 @@ const ACTION_HANDLERS = {
   [GET_TRANSACTIONS]: state => ({ ...state, transactionLoading: true }),
   [SEND_TRANSACTION]: (state, { transaction }) => ({
     ...state,
-    transactionsSending: [...state.transactionsSending, transaction]
+    transactionsSending: [...state.transactionsSending, transaction],
   }),
   [RECEIVE_TRANSACTIONS]: (state, { transactions }) => ({
     ...state,
     transactionLoading: false,
-    transactions
+    transactions,
   }),
   [ADD_TRANSACTION]: (state, { transaction }) => ({
     ...state,
-    transactions: [transaction, ...state.transactions]
+    transactions: [transaction, ...state.transactions],
   }),
   [TRANSACTION_SUCCESSFUL]: (state, { addr }) => {
     return {
@@ -186,9 +186,9 @@ const ACTION_HANDLERS = {
         }
         return {
           ...item,
-          status: 'successful'
+          status: 'successful',
         }
-      })
+      }),
     }
   },
   [TRANSACTION_FAILED]: (state, { addr, error }) => {
@@ -201,17 +201,17 @@ const ACTION_HANDLERS = {
         return {
           ...item,
           status: 'failed',
-          error
+          error,
         }
-      })
+      }),
     }
   },
   [TRANSACTION_COMPLETE]: (state, { addr }) => {
     return {
       ...state,
-      transactionsSending: state.transactionsSending.filter(item => item.addr !== addr)
+      transactionsSending: state.transactionsSending.filter(item => item.addr !== addr),
     }
-  }
+  },
 }
 
 const transactionsSelectors = {}
@@ -244,7 +244,7 @@ transactionsSelectors.transactionsSelector = createSelector(
         isClosing: Boolean(closedChannel),
         isPending: Boolean(pendingChannel),
         limboAmount: pendingChannel && pendingChannel.limbo_balance,
-        maturityHeight: pendingChannel && pendingChannel.maturity_height
+        maturityHeight: pendingChannel && pendingChannel.maturity_height,
       }
     })
 )
@@ -257,7 +257,7 @@ export { transactionsSelectors }
 const initialState = {
   transactionLoading: false,
   transactions: [],
-  transactionsSending: []
+  transactionsSending: [],
 }
 
 export default function transactionReducer(state = initialState, action) {
diff --git a/app/reducers/utils.js b/app/reducers/utils.js
index da4425a4ec1..9c9ec0d3372 100644
--- a/app/reducers/utils.js
+++ b/app/reducers/utils.js
@@ -33,8 +33,8 @@ export const isLoadingPerPath = state => {
   }
 
   if (pathname === '/syncing') {
-    const { syncStatus, lightningGrpcActive } = state.lnd
-    return syncStatus === 'pending' || !lightningGrpcActive
+    const { syncStatus, isLightningGrpcActive } = state.lnd
+    return syncStatus === 'pending' || !isLightningGrpcActive
   }
 
   return false
@@ -54,7 +54,7 @@ export const getLoadingMessage = state => {
     starting_wallet_unlocker,
     connecting_to_unlocker,
     starting_neutrino,
-    fetching_tickers
+    fetching_tickers,
   } = messages
   if (lndSelectors.isStartingLnd(state)) {
     return isLocal ? starting_lnd : connecting_to_lnd
@@ -71,8 +71,8 @@ export const getLoadingMessage = state => {
   // path specific messages
   const { pathname } = state.router.location
   if (pathname === '/syncing') {
-    const { lightningGrpcActive } = state.lnd
-    if (!lightningGrpcActive) {
+    const { isLightningGrpcActive } = state.lnd
+    if (!isLightningGrpcActive) {
       return starting_lnd
     }
   }
diff --git a/app/reducers/wallet.js b/app/reducers/wallet.js
index 1d9f5a95d03..7f9cc299bc3 100644
--- a/app/reducers/wallet.js
+++ b/app/reducers/wallet.js
@@ -21,13 +21,13 @@ export const PUT_WALLET = 'PUT_WALLET'
 export function setWallets(wallets) {
   return {
     type: SET_WALLETS,
-    wallets
+    wallets,
   }
 }
 
 export function setWalletsLoaded() {
   return {
-    type: SET_WALLETS_LOADED
+    type: SET_WALLETS_LOADED,
   }
 }
 
@@ -132,12 +132,12 @@ const ACTION_HANDLERS = {
   [SET_WALLETS_LOADED]: state => ({ ...state, isWalletsLoaded: true }),
   [OPEN_DELETE_WALLET_DIALOG]: state => ({
     ...state,
-    isDeleteDialogOpen: true
+    isDeleteDialogOpen: true,
   }),
   [CLOSE_DELETE_WALLET_DIALOG]: state => ({
     ...state,
-    isDeleteDialogOpen: false
-  })
+    isDeleteDialogOpen: false,
+  }),
 }
 
 // ------------------------------------
@@ -192,7 +192,7 @@ export { walletSelectors }
 
 const initialState = {
   isWalletsLoaded: false,
-  wallets: []
+  wallets: [],
 }
 
 export default function walletReducer(state = initialState, action) {
diff --git a/app/store/configureStore.dev.js b/app/store/configureStore.dev.js
index 5ffbdb0cbd3..73b4bacc62b 100644
--- a/app/store/configureStore.dev.js
+++ b/app/store/configureStore.dev.js
@@ -19,7 +19,7 @@ export const configureStore = initialState => {
   // Logging Middleware
   const logger = createLogger({
     level: 'info',
-    collapsed: true
+    collapsed: true,
   })
   middleware.push(logger)
 
@@ -34,7 +34,7 @@ export const configureStore = initialState => {
     typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
       ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
           actionCreators: {
-            ...routerActions
+            ...routerActions,
           },
           stateSanitizer: state => {
             const { invoice, locale, network } = state
@@ -52,7 +52,7 @@ export const configureStore = initialState => {
                       invoice.r_hash = '<<R_HASH_BUFFER_DATA>>'
                       invoice.r_preimage = '<<R_PREIMAGE_BUFFER_DATA>>'
                       return invoice
-                    })
+                    }),
                   },
 
                   // Slim down the nodes list.
@@ -62,23 +62,25 @@ export const configureStore = initialState => {
                       network.nodes.length > MAX_NODES
                         ? [
                             ...network.nodes.slice(0, MAX_NODES),
-                            `<<${network.nodes.length - MAX_NODES}_MORE_NODES>>`
+                            `<<${network.nodes.length - MAX_NODES}_MORE_NODES>>`,
                           ]
                         : network.nodes,
                     edges:
                       network.edges.length > MAX_EDGES
                         ? [
                             ...network.edges.slice(0, MAX_EDGES),
-                            `<<${network.edges.length - MAX_EDGES}_MORE_NODES>>`
+                            `<<${network.edges.length - MAX_EDGES}_MORE_NODES>>`,
                           ]
-                        : network.edges
+                        : network.edges,
                   },
 
                   // Strip out translation strings.
-                  locale: Object.keys(locale).map(key => ({ [key]: `<<_LOCALE_DATA_FOR_${key}>>` }))
+                  locale: Object.keys(locale).map(key => ({
+                    [key]: `<<_LOCALE_DATA_FOR_${key}>>`,
+                  })),
                 }
               : state
-          }
+          },
         })
       : compose
   /* eslint-enable no-underscore-dangle */
diff --git a/app/store/db.js b/app/store/db.js
index 23aa9824d15..69f74009bc2 100644
--- a/app/store/db.js
+++ b/app/store/db.js
@@ -10,7 +10,7 @@ export const getDb = name => {
   db.version(1).stores({
     settings: 'key',
     wallets: '++id, type, chain, network',
-    nodes: 'id'
+    nodes: 'id',
   })
 
   // Migrate custom wallets to lndconnect.
@@ -72,13 +72,13 @@ export const getDb = name => {
     autopilotMinchansize: Number,
     autopilotMaxchansize: Number,
     autopilotPrivate: Boolean,
-    autopilotMinconfs: Number
+    autopilotMinconfs: Number,
   })
 
   Object.defineProperty(Wallet.prototype, 'wallet', {
     get: function() {
       return `wallet-${this.id}`
-    }
+    },
   })
 
   const props = ['host', 'cert', 'macaroon']
@@ -91,7 +91,7 @@ export const getDb = name => {
           return data[prop]
         }
         return
-      }
+      },
     })
   })
 
@@ -102,7 +102,7 @@ export const getDb = name => {
   const Node = db.nodes.defineClass({
     id: String,
     hasSynced: Boolean,
-    addresses: Object
+    addresses: Object,
   })
 
   /**
diff --git a/app/themes/base.js b/app/themes/base.js
index 30cfb43768c..6377eb1dc55 100644
--- a/app/themes/base.js
+++ b/app/themes/base.js
@@ -20,7 +20,7 @@ export const palette = {
   gray: '#959595',
   lightGreen: '#eefff4',
   lightOrange: '#fff3e1',
-  lightRed: '#ffeded'
+  lightRed: '#ffeded',
 }
 
 export const fontSizes = {
@@ -31,7 +31,7 @@ export const fontSizes = {
   l: '15px',
   xl: '18px',
   xxl: '30px',
-  xxxl: '60px'
+  xxxl: '60px',
 }
 fontSizes[0] = fontSizes['xxs']
 fontSizes[1] = fontSizes['xs']
@@ -44,41 +44,41 @@ fontSizes[7] = fontSizes['xxxl']
 
 export const fontWeights = {
   light: 300,
-  normal: 400
+  normal: 400,
 }
 
 export const fonts = {
   0: 'Roboto, system-ui, sans-serif',
-  sans: 'Roboto, system-ui, sans-serif'
+  sans: 'Roboto, system-ui, sans-serif',
 }
 
 export const letterSpacings = {
   normal: 'normal',
-  caps: '0.025em'
+  caps: '0.025em',
 }
 
 const statuses = {
   online: {
-    color: palette.superGreen
+    color: palette.superGreen,
   },
   pending: {
-    color: palette.lightningOrange
+    color: palette.lightningOrange,
   },
   closing: {
-    color: palette.superRed
+    color: palette.superRed,
   },
   offline: {
-    color: palette.gray
-  }
+    color: palette.gray,
+  },
 }
 
 const bars = {
   normal: {
-    opacity: 0.6
+    opacity: 0.6,
   },
   light: {
-    opacity: 0.3
-  }
+    opacity: 0.3,
+  },
 }
 
 export default {
@@ -89,5 +89,5 @@ export default {
   letterSpacings,
   palette,
   statuses,
-  bars
+  bars,
 }
diff --git a/app/themes/dark.js b/app/themes/dark.js
index 966d46a5abc..652292e0d4e 100644
--- a/app/themes/dark.js
+++ b/app/themes/dark.js
@@ -13,7 +13,7 @@ const {
   pineGreen,
   superRed,
   mudBrown,
-  gray
+  gray,
 } = palette
 
 const colors = {
@@ -29,7 +29,7 @@ const colors = {
   pineGreen,
   superRed,
   mudBrown,
-  gray
+  gray,
 }
 
 const buttons = {
@@ -37,62 +37,62 @@ const buttons = {
     backgroundColor: colors.tertiaryColor,
     color: colors.lightningOrange,
     '&:hover:enabled': {
-      backgroundColor: colors.highlight
+      backgroundColor: colors.highlight,
     },
     '&:focus': {
-      backgroundColor: colors.highlight
-    }
+      backgroundColor: colors.highlight,
+    },
   },
   primary: {
     backgroundColor: colors.lightningOrange,
-    color: colors.white
+    color: colors.white,
   },
   secondary: {
     opacity: 0.6,
     '&.active': {
-      opacity: 1
+      opacity: 1,
     },
     backgroundColor: 'transparent',
     color: colors.primaryText,
     '&:hover:enabled': {
-      opacity: 1
+      opacity: 1,
     },
     '&:focus': {
-      opacity: 1
-    }
+      opacity: 1,
+    },
   },
   danger: {
     backgroundColor: colors.superRed,
-    color: colors.white
-  }
+    color: colors.white,
+  },
 }
 const cards = {
   success: {
     backgroundColor: colors.pineGreen,
-    color: colors.superGreen
+    color: colors.superGreen,
   },
   warning: {
     backgroundColor: colors.lightningBrown,
-    color: colors.lightningOrange
+    color: colors.lightningOrange,
   },
   error: {
     backgroundColor: colors.mudBrown,
-    color: colors.superRed
-  }
+    color: colors.superRed,
+  },
 }
 const messages = {
   success: {
-    color: colors.superGreen
+    color: colors.superGreen,
   },
   warning: {
-    color: colors.lightningOrange
+    color: colors.lightningOrange,
   },
   error: {
-    color: colors.superRed
+    color: colors.superRed,
   },
   processing: {
-    color: colors.lightningOrange
-  }
+    color: colors.lightningOrange,
+  },
 }
 
 export default {
@@ -101,5 +101,5 @@ export default {
   colors,
   buttons,
   cards,
-  messages
+  messages,
 }
diff --git a/app/themes/light.js b/app/themes/light.js
index bc8c1591727..7a40466f908 100644
--- a/app/themes/light.js
+++ b/app/themes/light.js
@@ -13,7 +13,7 @@ const {
   lightGreen,
   superRed,
   lightRed,
-  gray
+  gray,
 } = palette
 
 const colors = {
@@ -29,7 +29,7 @@ const colors = {
   lightGreen,
   superRed,
   lightRed,
-  gray
+  gray,
 }
 
 const buttons = {
@@ -37,62 +37,62 @@ const buttons = {
     backgroundColor: colors.tertiaryColor,
     color: colors.lightningOrange,
     '&:hover:enabled': {
-      backgroundColor: colors.highlight
+      backgroundColor: colors.highlight,
     },
     '&:focus': {
-      backgroundColor: colors.highlight
-    }
+      backgroundColor: colors.highlight,
+    },
   },
   primary: {
     backgroundColor: colors.lightningOrange,
-    color: colors.white
+    color: colors.white,
   },
   secondary: {
     opacity: 0.6,
     '&.active': {
-      opacity: 1
+      opacity: 1,
     },
     backgroundColor: 'transparent',
     color: colors.primaryText,
     '&:hover:enabled': {
-      opacity: 1
+      opacity: 1,
     },
     '&:focus': {
-      opacity: 1
-    }
+      opacity: 1,
+    },
   },
   danger: {
     backgroundColor: colors.superRed,
-    color: colors.white
-  }
+    color: colors.white,
+  },
 }
 const cards = {
   success: {
     backgroundColor: colors.lightGreen,
-    color: colors.superGreen
+    color: colors.superGreen,
   },
   warning: {
     backgroundColor: colors.lightOrange,
-    color: colors.lightningOrange
+    color: colors.lightningOrange,
   },
   error: {
     backgroundColor: colors.lightRed,
-    color: colors.superRed
+    color: colors.superRed,
   },
   processing: {
-    color: colors.lightningOrange
-  }
+    color: colors.lightningOrange,
+  },
 }
 const messages = {
   success: {
-    color: colors.superGreen
+    color: colors.superGreen,
   },
   warning: {
-    color: colors.lightningOrange
+    color: colors.lightningOrange,
   },
   error: {
-    color: colors.superRed
-  }
+    color: colors.superRed,
+  },
 }
 
 export default {
@@ -101,5 +101,5 @@ export default {
   colors,
   buttons,
   cards,
-  messages
+  messages,
 }
diff --git a/babel.config.js b/babel.config.js
index aef9459648b..122842d1361 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -4,11 +4,11 @@ module.exports = {
       '@babel/preset-env',
       {
         useBuiltIns: 'usage',
-        include: ['proposal-object-rest-spread', 'transform-classes', 'transform-destructuring']
-      }
+        include: ['proposal-object-rest-spread', 'transform-classes', 'transform-destructuring'],
+      },
     ],
     '@babel/preset-flow',
-    '@babel/react'
+    '@babel/react',
   ],
   plugins: [
     '@babel/plugin-proposal-class-properties',
@@ -18,9 +18,9 @@ module.exports = {
       'react-intl-auto',
       {
         removePrefix: 'app/',
-        filebase: false
-      }
-    ]
+        filebase: false,
+      },
+    ],
   ],
   env: {
     production: {
@@ -28,8 +28,8 @@ module.exports = {
         '@babel/transform-react-constant-elements',
         '@babel/transform-react-inline-elements',
         'transform-react-remove-prop-types',
-        'transform-react-pure-class-to-function'
-      ]
-    }
-  }
+        'transform-react-pure-class-to-function',
+      ],
+    },
+  },
 }
diff --git a/config/default.js b/config/default.js
index bac1b74fdcc..e28d1aa5dc3 100644
--- a/config/default.js
+++ b/config/default.js
@@ -9,7 +9,7 @@ const { version } = getPackageDetails()
 module.exports = {
   db: {
     namespace: 'ZapDesktop',
-    domain: isStableVersion(version, STABLE_VERSION) ? null : 'next'
+    domain: isStableVersion(version, STABLE_VERSION) ? null : 'next',
   },
 
   neutrino: {
@@ -17,11 +17,11 @@ module.exports = {
     network: 'testnet',
     connect: {
       testnet: ['testnet3-btcd.zaphq.io', 'testnet4-btcd.zaphq.io'],
-      mainnet: ['mainnet1-btcd.zaphq.io', 'mainnet2-btcd.zaphq.io']
-    }
+      mainnet: ['mainnet1-btcd.zaphq.io', 'mainnet2-btcd.zaphq.io'],
+    },
   },
 
   chains: ['bitcoin'],
 
-  networks: ['testnet', 'mainnet']
+  networks: ['testnet', 'mainnet'],
 }
diff --git a/internals/webpack/webpack.config.base.js b/internals/webpack/webpack.config.base.js
index aa787fc1ca3..6e2eeaa4ed3 100644
--- a/internals/webpack/webpack.config.base.js
+++ b/internals/webpack/webpack.config.base.js
@@ -20,9 +20,9 @@ export default {
         use: {
           loader: 'babel-loader',
           options: {
-            cacheDirectory: true
-          }
-        }
+            cacheDirectory: true,
+          },
+        },
       },
       // WOFF Font
       {
@@ -31,9 +31,9 @@ export default {
           loader: 'url-loader',
           options: {
             limit: 10000,
-            mimetype: 'application/font-woff'
-          }
-        }
+            mimetype: 'application/font-woff',
+          },
+        },
       },
       // WOFF2 Font
       {
@@ -42,9 +42,9 @@ export default {
           loader: 'url-loader',
           options: {
             limit: 10000,
-            mimetype: 'application/font-woff'
-          }
-        }
+            mimetype: 'application/font-woff',
+          },
+        },
       },
       // TTF Font
       {
@@ -53,18 +53,18 @@ export default {
           loader: 'url-loader',
           options: {
             limit: 10000,
-            mimetype: 'application/octet-stream'
-          }
-        }
-      }
-    ]
+            mimetype: 'application/octet-stream',
+          },
+        },
+      },
+    ],
   },
 
   /**
    * Determine the array of extensions that should be used to resolve modules.
    */
   resolve: {
-    modules: [path.resolve(rootDir, 'app'), 'node_modules', 'app/node_modules']
+    modules: [path.resolve(rootDir, 'app'), 'node_modules', 'app/node_modules'],
   },
 
   plugins: [
@@ -72,10 +72,10 @@ export default {
 
     // Make config object available at global CONFIG var.
     // See https://github.com/lorenwest/node-config/wiki/Webpack-Usage#option-1
-    new DefinePlugin({ CONFIG: JSON.stringify(config) })
+    new DefinePlugin({ CONFIG: JSON.stringify(config) }),
   ],
 
   optimization: {
-    namedModules: true
-  }
+    namedModules: true,
+  },
 }
diff --git a/internals/webpack/webpack.config.main.prod.js b/internals/webpack/webpack.config.main.prod.js
index 877cacf03b1..f166a83e3ca 100644
--- a/internals/webpack/webpack.config.main.prod.js
+++ b/internals/webpack/webpack.config.main.prod.js
@@ -18,23 +18,23 @@ export default merge.smart(baseConfig, {
   externals: ['config'],
 
   entry: {
-    main: path.join(rootDir, 'app', 'main')
+    main: path.join(rootDir, 'app', 'main'),
   },
 
   output: {
     path: path.join(rootDir, 'app', 'dist'),
-    filename: '[name].prod.js'
+    filename: '[name].prod.js',
   },
 
   plugins: [
     new EnvironmentPlugin({
-      NODE_ENV: 'production'
+      NODE_ENV: 'production',
     }),
 
     new BundleAnalyzerPlugin({
       analyzerMode: process.env.OPEN_ANALYZER === 'true' ? 'server' : 'disabled',
-      openAnalyzer: process.env.OPEN_ANALYZER === 'true'
-    })
+      openAnalyzer: process.env.OPEN_ANALYZER === 'true',
+    }),
   ],
 
   /**
@@ -44,6 +44,6 @@ export default merge.smart(baseConfig, {
    */
   node: {
     __dirname: false,
-    __filename: false
-  }
+    __filename: false,
+  },
 })
diff --git a/internals/webpack/webpack.config.preload.prod.js b/internals/webpack/webpack.config.preload.prod.js
index 16b3064666a..486408387dc 100644
--- a/internals/webpack/webpack.config.preload.prod.js
+++ b/internals/webpack/webpack.config.preload.prod.js
@@ -16,23 +16,23 @@ export default merge.smart(baseConfig, {
   mode: 'production',
 
   entry: {
-    preload: path.join(rootDir, 'app', 'preload')
+    preload: path.join(rootDir, 'app', 'preload'),
   },
 
   output: {
     path: path.join(rootDir, 'app', 'dist'),
-    filename: '[name].prod.js'
+    filename: '[name].prod.js',
   },
 
   plugins: [
     new EnvironmentPlugin({
-      NODE_ENV: 'production'
+      NODE_ENV: 'production',
     }),
 
     new BundleAnalyzerPlugin({
       analyzerMode: process.env.OPEN_ANALYZER === 'true' ? 'server' : 'disabled',
-      openAnalyzer: process.env.OPEN_ANALYZER === 'true'
-    })
+      openAnalyzer: process.env.OPEN_ANALYZER === 'true',
+    }),
   ],
 
   /**
@@ -42,6 +42,6 @@ export default merge.smart(baseConfig, {
    */
   node: {
     __dirname: false,
-    __filename: false
-  }
+    __filename: false,
+  },
 })
diff --git a/internals/webpack/webpack.config.renderer.dev.dll.js b/internals/webpack/webpack.config.renderer.dev.dll.js
index 9ea3ea2feb5..c694e33001b 100644
--- a/internals/webpack/webpack.config.renderer.dev.dll.js
+++ b/internals/webpack/webpack.config.renderer.dev.dll.js
@@ -28,7 +28,7 @@ export default merge.smart(baseConfig, {
     'lnd-grpc',
     'redux-electron-ipc',
     'rimraf',
-    'source-map-support'
+    'source-map-support',
   ],
 
   /**
@@ -40,30 +40,30 @@ export default merge.smart(baseConfig, {
       // Common Image Formats
       {
         test: /\.(?:ico|gif|png|jpg|jpeg|webp)$/,
-        use: 'url-loader'
-      }
-    ]
+        use: 'url-loader',
+      },
+    ],
   },
 
   resolve: {
-    modules: ['app']
+    modules: ['app'],
   },
 
   entry: {
-    renderer: Object.keys(dependencies)
+    renderer: Object.keys(dependencies),
   },
 
   output: {
     path: path.join(rootDir, 'dll'),
     library: 'renderer',
     filename: '[name].dev.dll.js',
-    libraryTarget: 'var'
+    libraryTarget: 'var',
   },
 
   plugins: [
     new webpack.DllPlugin({
       path: path.join('dll', '[name].json'),
-      name: '[name]'
+      name: '[name]',
     }),
 
     new webpack.LoaderOptionsPlugin({
@@ -71,9 +71,9 @@ export default merge.smart(baseConfig, {
       options: {
         context: path.join(rootDir, 'app'),
         output: {
-          path: path.join(rootDir, 'dll')
-        }
-      }
-    })
-  ]
+          path: path.join(rootDir, 'dll'),
+        },
+      },
+    }),
+  ],
 })
diff --git a/internals/webpack/webpack.config.renderer.dev.js b/internals/webpack/webpack.config.renderer.dev.js
index 47a5a458f75..afc1bfbfff0 100644
--- a/internals/webpack/webpack.config.renderer.dev.js
+++ b/internals/webpack/webpack.config.renderer.dev.js
@@ -43,17 +43,17 @@ export default merge.smart(baseConfig, {
   entry: path.join(rootDir, 'app', 'index'),
 
   output: {
-    publicPath: `http://localhost:${port}/dist/`
+    publicPath: `http://localhost:${port}/dist/`,
   },
 
   stats: {
-    children: false
+    children: false,
   },
 
   resolve: {
     alias: {
-      'react-dom': '@hot-loader/react-dom'
-    }
+      'react-dom': '@hot-loader/react-dom',
+    },
   },
 
   module: {
@@ -64,40 +64,40 @@ export default merge.smart(baseConfig, {
         use: {
           loader: 'babel-loader',
           options: {
-            cacheDirectory: true
-          }
-        }
+            cacheDirectory: true,
+          },
+        },
       },
       // Common Image Formats
       {
         test: /\.(?:ico|gif|png|jpg|jpeg|webp)$/,
-        use: 'url-loader'
-      }
-    ]
+        use: 'url-loader',
+      },
+    ],
   },
 
   plugins: [
     new webpack.DllReferencePlugin({
       context: process.cwd(),
       manifest: require(manifest),
-      sourceType: 'var'
+      sourceType: 'var',
     }),
 
     new webpack.LoaderOptionsPlugin({
-      debug: true
+      debug: true,
     }),
 
     new webpack.EnvironmentPlugin({
-      NODE_ENV: 'development'
+      NODE_ENV: 'development',
     }),
 
     new HtmlWebpackPlugin({
-      template: path.join('app', 'app.html')
+      template: path.join('app', 'app.html'),
     }),
 
     new AddAssetHtmlPlugin({
       filepath: path.join('dll', 'renderer.dev.dll.js'),
-      includeSourcemap: false
+      includeSourcemap: false,
     }),
 
     new CspHtmlWebpackPlugin({
@@ -109,7 +109,7 @@ export default merge.smart(baseConfig, {
         'ws://localhost:*',
         'https://api.coinbase.com/',
         'https://bitcoinfees.earn.com',
-        'https://zap.jackmallers.com'
+        'https://zap.jackmallers.com',
       ],
       'img-src': ['http://www.zap.jackmallers.com'],
       'script-src': ["'self'", 'http://localhost:*', "'unsafe-eval'"],
@@ -118,17 +118,17 @@ export default merge.smart(baseConfig, {
         'data:',
         'http://localhost:*',
         'https://s3.amazonaws.com',
-        'https://fonts.gstatic.com'
+        'https://fonts.gstatic.com',
       ],
-      'style-src': ["'self'", 'blob:', 'https://s3.amazonaws.com', "'unsafe-inline'"]
-    })
+      'style-src': ["'self'", 'blob:', 'https://s3.amazonaws.com', "'unsafe-inline'"],
+    }),
   ],
 
   node: {
     __dirname: false,
     __filename: false,
     fs: 'empty',
-    module: 'empty'
+    module: 'empty',
   },
 
   devServer: {
@@ -139,19 +139,19 @@ export default merge.smart(baseConfig, {
     watchOptions: {
       aggregateTimeout: 300,
       ignored: /node_modules/,
-      poll: 100
+      poll: 100,
     },
     proxy: {
       '/proxy/zap.jackmallers.com': {
         target: 'https://zap.jackmallers.com',
         pathRewrite: { '^/proxy/zap.jackmallers.com': '' },
-        changeOrigin: true
+        changeOrigin: true,
       },
       '/proxy/api.coinbase.com': {
         target: 'https://api.coinbase.com',
         pathRewrite: { '^/proxy/api.coinbase.com': '' },
-        changeOrigin: true
-      }
+        changeOrigin: true,
+      },
     },
     historyApiFallback: true,
     // Start the main process as soon as the server is listening.
@@ -160,15 +160,15 @@ export default merge.smart(baseConfig, {
         spawn('npm', ['run', 'start-main-dev'], {
           shell: true,
           env: process.env,
-          stdio: 'inherit'
+          stdio: 'inherit',
         })
           .on('close', code => process.exit(code))
           .on('error', spawnError => mainLog.error(spawnError))
       }
-    }
+    },
   },
 
   optimization: {
-    noEmitOnErrors: true
-  }
+    noEmitOnErrors: true,
+  },
 })
diff --git a/internals/webpack/webpack.config.renderer.e2e.js b/internals/webpack/webpack.config.renderer.e2e.js
index 92a8197640b..7e5b1edf770 100644
--- a/internals/webpack/webpack.config.renderer.e2e.js
+++ b/internals/webpack/webpack.config.renderer.e2e.js
@@ -8,6 +8,6 @@ import rendererProdConf from './webpack.config.renderer.prod'
 // Disable minification for compatibility with testcafe-react-selectors.
 export default merge.smart(rendererProdConf, {
   optimization: {
-    minimizer: []
-  }
+    minimizer: [],
+  },
 })
diff --git a/internals/webpack/webpack.config.renderer.prod.js b/internals/webpack/webpack.config.renderer.prod.js
index 8afa7501706..544d3c4ee2d 100644
--- a/internals/webpack/webpack.config.renderer.prod.js
+++ b/internals/webpack/webpack.config.renderer.prod.js
@@ -23,16 +23,16 @@ export default merge.smart(baseConfig, {
   externals: new ExternalsPlugin('commonjs', [...Object.keys(externals || {})]),
 
   entry: {
-    renderer: path.join(rootDir, 'app', 'index')
+    renderer: path.join(rootDir, 'app', 'index'),
   },
 
   output: {
     path: path.join(rootDir, 'app', 'dist'),
-    filename: '[name].prod.js'
+    filename: '[name].prod.js',
   },
 
   stats: {
-    children: false
+    children: false,
   },
 
   module: {
@@ -40,27 +40,27 @@ export default merge.smart(baseConfig, {
       // Common Image Formats
       {
         test: /\.(?:ico|gif|png|jpg|jpeg|webp)$/,
-        use: 'url-loader'
-      }
-    ]
+        use: 'url-loader',
+      },
+    ],
   },
 
   plugins: [
     new CleanWebpackPlugin([path.resolve('app', 'dist')], {
-      root: path.resolve('..', '..')
+      root: path.resolve('..', '..'),
     }),
 
     new EnvironmentPlugin({
-      NODE_ENV: 'production'
+      NODE_ENV: 'production',
     }),
 
     new HtmlWebpackPlugin({
-      template: path.join('app', 'app.html')
+      template: path.join('app', 'app.html'),
     }),
 
     new CopyWebpackPlugin([
       path.join('app', 'empty.html'),
-      { from: path.join('app/lib/zap/about', 'preload.js'), to: 'about_preload.prod.js' }
+      { from: path.join('app/lib/zap/about', 'preload.js'), to: 'about_preload.prod.js' },
     ]),
 
     new CspHtmlWebpackPlugin({
@@ -70,24 +70,24 @@ export default merge.smart(baseConfig, {
         "'self'",
         'https://api.coinbase.com',
         'https://bitcoinfees.earn.com',
-        'https://zap.jackmallers.com'
+        'https://zap.jackmallers.com',
       ],
       'img-src': ['http://www.zap.jackmallers.com'],
       'script-src': ["'self'"],
       'font-src': ["'self'", 'data:', 'https://s3.amazonaws.com', 'https://fonts.gstatic.com'],
-      'style-src': ["'self'", 'blob:', 'https://s3.amazonaws.com', "'unsafe-inline'"]
+      'style-src': ["'self'", 'blob:', 'https://s3.amazonaws.com', "'unsafe-inline'"],
     }),
 
     new BundleAnalyzerPlugin({
       analyzerMode: process.env.OPEN_ANALYZER === 'true' ? 'server' : 'disabled',
-      openAnalyzer: process.env.OPEN_ANALYZER === 'true'
-    })
+      openAnalyzer: process.env.OPEN_ANALYZER === 'true',
+    }),
   ],
 
   node: {
     __dirname: false,
     __filename: false,
     fs: 'empty',
-    module: 'empty'
-  }
+    module: 'empty',
+  },
 })
diff --git a/stories/Provider.js b/stories/Provider.js
index 65812fa5bf4..6a78293eadf 100644
--- a/stories/Provider.js
+++ b/stories/Provider.js
@@ -14,14 +14,14 @@ export const db = getDb(getDbName(CONFIG))
 db.open()
 
 window.Zap = {
-  openExternal: uri => window.open(uri, '_blank')
+  openExternal: uri => window.open(uri, '_blank'),
 }
 
 window.ipcRenderer = new EventEmitter()
 
 window.env = {
   ZAP_NAMESPACE: process.env.ZAP_NAMESPACE,
-  NODE_ENV: process.env.NODE_ENV
+  NODE_ENV: process.env.NODE_ENV,
 }
 
 // Default the locale to English.
@@ -32,8 +32,8 @@ export const initialState = {
   intl: {
     locale: defaultLocale,
     messages: translations[defaultLocale],
-    timeZone: jstz.determine().name()
-  }
+    timeZone: jstz.determine().name(),
+  },
 }
 
 export const store = configureStore(initialState)
@@ -43,7 +43,7 @@ export const Provider = ({ story }) => {
 }
 
 Provider.propTypes = {
-  story: PropTypes.any.isRequired
+  story: PropTypes.any.isRequired,
 }
 
 store.dispatch({
@@ -52,36 +52,36 @@ store.dispatch({
     chains: [
       {
         chain: 'bitcoin',
-        network: 'mainnet'
-      }
-    ]
-  }
+        network: 'mainnet',
+      },
+    ],
+  },
 })
 store.dispatch({
   type: 'RECIEVE_TICKERS',
   btcTicker: {
     EUR: '2992.105',
     GBP: '2612.025',
-    USD: '3412.015'
+    USD: '3412.015',
   },
   ltcTicker: {
     EUR: '27.005',
     GBP: '23.605',
-    USD: '30.775'
-  }
+    USD: '30.775',
+  },
 })
 store.dispatch({
   type: 'SET_CRYPTO',
-  crypto: 'bitcoin'
+  crypto: 'bitcoin',
 })
 store.dispatch({
   type: 'SET_CURRENCY',
-  currency: 'btc'
+  currency: 'btc',
 })
 store.dispatch({
   type: 'RECEIVE_BALANCE',
   walletBalance: 47238944,
   walletBalanceConfirmed: 37236599,
   walletBalanceUnconfirmed: 10002345,
-  channelBalance: 256474
+  channelBalance: 256474,
 })
diff --git a/stories/_general/_welcome.stories.js b/stories/_general/_welcome.stories.js
index db6c378869c..7e8df161e94 100644
--- a/stories/_general/_welcome.stories.js
+++ b/stories/_general/_welcome.stories.js
@@ -14,7 +14,7 @@ import {
   Range,
   TextArea,
   Toggle,
-  Tooltip
+  Tooltip,
 } from 'components/UI'
 import { Column, Group, Element } from '../helpers'
 
@@ -24,31 +24,31 @@ const store = new Store({
   cryptoCurrencies: [
     {
       key: 'btc',
-      name: 'BTC'
+      name: 'BTC',
     },
     {
       key: 'bits',
-      name: 'bits'
+      name: 'bits',
     },
     {
       key: 'sats',
-      name: 'satoshis'
-    }
+      name: 'satoshis',
+    },
   ],
   fiatCurrencies: [
     {
       key: 'usd',
-      name: 'USD'
+      name: 'USD',
     },
     {
       key: 'eur',
-      name: 'EUR'
+      name: 'EUR',
     },
     {
       key: 'gbp',
-      name: 'GBP'
-    }
-  ]
+      name: 'GBP',
+    },
+  ],
 })
 
 storiesOf('General', module)
@@ -66,7 +66,7 @@ storiesOf('General', module)
               showSource: false,
               allowSourceToggling: false,
               showPropTables: false,
-              allowPropTablesToggling: false
+              allowPropTablesToggling: false,
             },
             sectionFn: () => (
               <Flex>
@@ -124,14 +124,14 @@ storiesOf('General', module)
                   <Group title="Lightning Invoice Input">
                     <Form>
                       <LightningInvoiceInput
-                        field="input"
                         chain="bitcoin"
+                        field="input"
+                        /* eslint-disable max-len */
+                        initialValue="lntb100u1pdaxza7pp5x73t3j7xgvkzgcdvzgpdg74k4pn0uhwuxlxu9qssytjn77x7zs4qdqqcqzysxqyz5vqd20eaq5uferzgzwasu5te3pla7gv8tzk8gcdxlj7lpkygvfdwndhwtl3ezn9ltjejl3hsp36ps3z3e5pp4rzp2hgqjqql80ec3hyzucq4d9axl"
                         network="testnet"
                         rows={7}
                         validateOnBlur
                         validateOnChange
-                        /* eslint-disable max-len */
-                        initialValue="lntb100u1pdaxza7pp5x73t3j7xgvkzgcdvzgpdg74k4pn0uhwuxlxu9qssytjn77x7zs4qdqqcqzysxqyz5vqd20eaq5uferzgzwasu5te3pla7gv8tzk8gcdxlj7lpkygvfdwndhwtl3ezn9ltjejl3hsp36ps3z3e5pp4rzp2hgqjqql80ec3hyzucq4d9axl"
                       />
                     </Form>
                   </Group>
@@ -158,7 +158,7 @@ storiesOf('General', module)
                       <Button>Send 0.1235 BTC</Button>
                     </Element>
                     <Element>
-                      <Button processing disabled>
+                      <Button isDisabled isProcessing>
                         Send 0.1235 BTC
                       </Button>
                     </Element>
@@ -189,9 +189,9 @@ storiesOf('General', module)
                   </Group>
                 </Column>
               </Flex>
-            )
-          }
-        ]
-      }
-    ]
+            ),
+          },
+        ],
+      },
+    ],
   })
diff --git a/stories/_general/color.stories.js b/stories/_general/color.stories.js
index f3e4dd98152..57e528b05a2 100644
--- a/stories/_general/color.stories.js
+++ b/stories/_general/color.stories.js
@@ -12,14 +12,14 @@ const Swatch = ({ name, color }) => (
     <Flex mb={2}>
       <Card
         // bg={color}
-        width={50}
-        mr={21}
         borderRadius={8}
         boxShadow="0 2px 6px rgba(0, 0, 0, 0.3)"
         css={{
           background: color,
-          height: '50px'
+          height: '50px',
         }}
+        mr={21}
+        width={50}
       />
       <Box>
         <Text fontWeight="normal">{name}</Text>
@@ -29,14 +29,14 @@ const Swatch = ({ name, color }) => (
   </Element>
 )
 Swatch.propTypes = {
+  color: PropTypes.string,
   name: PropTypes.string,
-  color: PropTypes.string
 }
 
 const Palette = withTheme(({ theme, ...rest }) => (
   <Box {...rest}>
     {Object.keys(theme.colors).map(key => (
-      <Swatch key={key} name={key} color={theme.colors[key]} />
+      <Swatch key={key} color={theme.colors[key]} name={key} />
     ))}
   </Box>
 ))
@@ -53,12 +53,12 @@ storiesOf('General', module).addWithChapters('Color palette', {
             showSource: false,
             allowSourceToggling: false,
             showPropTables: false,
-            allowPropTablesToggling: false
+            allowPropTablesToggling: false,
           },
           sectionFn: () => (
             <Flex>
               <Column>
-                <Group title="Dark" withBar={false}>
+                <Group hasBar={false} title="Dark">
                   <ThemeProvider theme={dark}>
                     <BackgroundPrimary p={3}>
                       <Palette />
@@ -68,7 +68,7 @@ storiesOf('General', module).addWithChapters('Color palette', {
               </Column>
 
               <Column>
-                <Group title="Light" withBar={false}>
+                <Group hasBar={false} title="Light">
                   <ThemeProvider theme={light}>
                     <BackgroundPrimary p={3}>
                       <Palette />
@@ -77,9 +77,9 @@ storiesOf('General', module).addWithChapters('Color palette', {
                 </Group>
               </Column>
             </Flex>
-          )
-        }
-      ]
-    }
-  ]
+          ),
+        },
+      ],
+    },
+  ],
 })
diff --git a/stories/_general/typography.stories.js b/stories/_general/typography.stories.js
index 4f5d2a504e9..bab54112601 100644
--- a/stories/_general/typography.stories.js
+++ b/stories/_general/typography.stories.js
@@ -11,21 +11,21 @@ storiesOf('General', module).addWithChapters('Typography', {
       sections: [
         {
           title: 'h1',
-          sectionFn: () => <Heading.h1>The quick brown fox jumps over the lazy dog</Heading.h1>
+          sectionFn: () => <Heading.h1>The quick brown fox jumps over the lazy dog</Heading.h1>,
         },
         {
           title: 'h2',
-          sectionFn: () => <Heading.h2>The quick brown fox jumps over the lazy dog</Heading.h2>
+          sectionFn: () => <Heading.h2>The quick brown fox jumps over the lazy dog</Heading.h2>,
         },
         {
           title: 'h3',
-          sectionFn: () => <Heading.h3>The quick brown fox jumps over the lazy dog</Heading.h3>
+          sectionFn: () => <Heading.h3>The quick brown fox jumps over the lazy dog</Heading.h3>,
         },
         {
           title: 'h4',
-          sectionFn: () => <Heading.h4>The quick brown fox jumps over the lazy dog</Heading.h4>
-        }
-      ]
+          sectionFn: () => <Heading.h4>The quick brown fox jumps over the lazy dog</Heading.h4>,
+        },
+      ],
     },
     {
       title: 'Text (weights)',
@@ -34,46 +34,46 @@ storiesOf('General', module).addWithChapters('Typography', {
           title: 'Normal',
           sectionFn: () => (
             <Text fontWeight="normal">The quick brown fox jumps over the lazy dog</Text>
-          )
+          ),
         },
         {
           title: 'Light',
-          sectionFn: () => <Text>The quick brown fox jumps over the lazy dog</Text>
-        }
-      ]
+          sectionFn: () => <Text>The quick brown fox jumps over the lazy dog</Text>,
+        },
+      ],
     },
     {
       title: 'Text (sizes)',
       sections: [
         {
           title: 'Extra Extra large',
-          sectionFn: () => <Text fontSize="xxl">The quick brown fox jumps over the lazy dog</Text>
+          sectionFn: () => <Text fontSize="xxl">The quick brown fox jumps over the lazy dog</Text>,
         },
         {
           title: 'Extra Large',
-          sectionFn: () => <Text fontSize="xl">The quick brown fox jumps over the lazy dog</Text>
+          sectionFn: () => <Text fontSize="xl">The quick brown fox jumps over the lazy dog</Text>,
         },
         {
           title: 'Large',
-          sectionFn: () => <Text fontSize="l">The quick brown fox jumps over the lazy dog</Text>
+          sectionFn: () => <Text fontSize="l">The quick brown fox jumps over the lazy dog</Text>,
         },
         {
           title: 'Medium',
-          sectionFn: () => <Text fontSize="m">The quick brown fox jumps over the lazy dog</Text>
+          sectionFn: () => <Text fontSize="m">The quick brown fox jumps over the lazy dog</Text>,
         },
         {
           title: 'Small',
-          sectionFn: () => <Text fontSize="s">The quick brown fox jumps over the lazy dog</Text>
+          sectionFn: () => <Text fontSize="s">The quick brown fox jumps over the lazy dog</Text>,
         },
         {
           title: 'Extra Small',
-          sectionFn: () => <Text fontSize="xs">The quick brown fox jumps over the lazy dog</Text>
+          sectionFn: () => <Text fontSize="xs">The quick brown fox jumps over the lazy dog</Text>,
         },
         {
           title: 'Extra Extra Small',
-          sectionFn: () => <Text fontSize="xxs">The quick brown fox jumps over the lazy dog</Text>
-        }
-      ]
-    }
-  ]
+          sectionFn: () => <Text fontSize="xxs">The quick brown fox jumps over the lazy dog</Text>,
+        },
+      ],
+    },
+  ],
 })
diff --git a/stories/components/actionbar.stories.js b/stories/components/actionbar.stories.js
index 88542d679d8..5d9c1c3bf74 100644
--- a/stories/components/actionbar.stories.js
+++ b/stories/components/actionbar.stories.js
@@ -14,12 +14,12 @@ storiesOf('Components', module).addWithChapters('ActionBar', {
             <ActionBar
               buttons={[
                 { name: 'Cancel', onClick: () => alert('Cancel') },
-                { name: 'Save', onClick: () => alert('Save') }
+                { name: 'Save', onClick: () => alert('Save') },
               ]}
             />
-          )
-        }
-      ]
-    }
-  ]
+          ),
+        },
+      ],
+    },
+  ],
 })
diff --git a/stories/components/background.stories.js b/stories/components/background.stories.js
index d88be2207cc..a271f9abeb1 100644
--- a/stories/components/background.stories.js
+++ b/stories/components/background.stories.js
@@ -8,7 +8,7 @@ const Wrapper = ({ children }) => (
   <Page css={{ height: '50px', 'min-height': '200px' }}>{children}</Page>
 )
 Wrapper.propTypes = {
-  children: PropTypes.node
+  children: PropTypes.node,
 }
 
 storiesOf('Components', module).addWithChapters('Background', {
@@ -17,50 +17,50 @@ storiesOf('Components', module).addWithChapters('Background', {
       sections: [
         {
           options: {
-            decorator: story => <Wrapper>{story()}</Wrapper>
+            decorator: story => <Wrapper>{story()}</Wrapper>,
           },
           sectionFn: () => (
             <BackgroundPrimary
-              width={1}
               css={{
-                height: '100%'
+                height: '100%',
               }}
+              width={1}
             >
               <Content>BackgroundPrimary</Content>
             </BackgroundPrimary>
-          )
+          ),
         },
         {
           options: {
-            decorator: story => <Wrapper>{story()}</Wrapper>
+            decorator: story => <Wrapper>{story()}</Wrapper>,
           },
           sectionFn: () => (
             <BackgroundSecondary
-              width={1}
               css={{
-                height: '100%'
+                height: '100%',
               }}
+              width={1}
             >
               <Content>BackgroundSecondary</Content>
             </BackgroundSecondary>
-          )
+          ),
         },
         {
           options: {
-            decorator: story => <Wrapper>{story()}</Wrapper>
+            decorator: story => <Wrapper>{story()}</Wrapper>,
           },
           sectionFn: () => (
             <BackgroundTertiary
-              width={1}
               css={{
-                height: '100%'
+                height: '100%',
               }}
+              width={1}
             >
               <Content>BackgroundTertiary</Content>
             </BackgroundTertiary>
-          )
-        }
-      ]
-    }
-  ]
+          ),
+        },
+      ],
+    },
+  ],
 })
diff --git a/stories/components/bar.stories.js b/stories/components/bar.stories.js
index da5dc8af24f..e91ed277752 100644
--- a/stories/components/bar.stories.js
+++ b/stories/components/bar.stories.js
@@ -9,9 +9,9 @@ storiesOf('Components', module).addWithChapters('Bar', {
     {
       sections: [
         {
-          sectionFn: () => <Bar />
-        }
-      ]
-    }
-  ]
+          sectionFn: () => <Bar />,
+        },
+      ],
+    },
+  ],
 })
diff --git a/stories/components/button.stories.js b/stories/components/button.stories.js
index ad5897844b3..0f21a8498d7 100644
--- a/stories/components/button.stories.js
+++ b/stories/components/button.stories.js
@@ -13,7 +13,7 @@ storiesOf('Components', module).addWithChapters('Button', {
       sections: [
         {
           title: 'Basic',
-          sectionFn: () => <Button onClick={action('clicked')}>Basic button</Button>
+          sectionFn: () => <Button onClick={action('clicked')}>Basic button</Button>,
         },
         {
           title: 'With Icon',
@@ -36,9 +36,9 @@ storiesOf('Components', module).addWithChapters('Button', {
                 </Flex>
               </Button>
             </section>
-          )
-        }
-      ]
+          ),
+        },
+      ],
     },
     {
       title: 'Variants',
@@ -49,7 +49,7 @@ storiesOf('Components', module).addWithChapters('Button', {
             <Button onClick={action('clicked')} variant="primary">
               Primary button
             </Button>
-          )
+          ),
         },
         {
           title: 'Secondary',
@@ -57,7 +57,7 @@ storiesOf('Components', module).addWithChapters('Button', {
             <Button onClick={action('clicked')} variant="secondary">
               Secondary button
             </Button>
-          )
+          ),
         },
         {
           title: 'Danger',
@@ -65,9 +65,9 @@ storiesOf('Components', module).addWithChapters('Button', {
             <Button onClick={action('clicked')} variant="danger">
               A very dangerous button
             </Button>
-          )
-        }
-      ]
+          ),
+        },
+      ],
     },
     {
       title: 'States',
@@ -75,27 +75,27 @@ storiesOf('Components', module).addWithChapters('Button', {
         {
           title: 'Processing',
           sectionFn: () => (
-            <Button processing onClick={action('clicked')}>
+            <Button isProcessing onClick={action('clicked')}>
               Processing
             </Button>
-          )
+          ),
         },
         {
           title: 'Disabled',
           sectionFn: () => (
-            <Button disabled onClick={action('clicked')}>
+            <Button isDisabled onClick={action('clicked')}>
               Disabled button
             </Button>
-          )
-        }
-      ]
+          ),
+        },
+      ],
     },
     {
       title: 'Sizes',
       sections: [
         {
           title: 'Medium',
-          sectionFn: () => <Button onClick={action('clicked')}>Medium button</Button>
+          sectionFn: () => <Button onClick={action('clicked')}>Medium button</Button>,
         },
         {
           title: 'Small',
@@ -103,9 +103,9 @@ storiesOf('Components', module).addWithChapters('Button', {
             <Button onClick={action('clicked')} size="small">
               Small button
             </Button>
-          )
-        }
-      ]
-    }
-  ]
+          ),
+        },
+      ],
+    },
+  ],
 })
diff --git a/stories/components/card.stories.js b/stories/components/card.stories.js
index 9409aa71e19..af79790ab9a 100644
--- a/stories/components/card.stories.js
+++ b/stories/components/card.stories.js
@@ -27,9 +27,9 @@ storiesOf('Components', module).addWithChapters('Card', {
                 </Button>
               </Flex>
             </Card>
-          )
-        }
-      ]
-    }
-  ]
+          ),
+        },
+      ],
+    },
+  ],
 })
diff --git a/stories/components/countdown.stories.js b/stories/components/countdown.stories.js
index 93ad693bca2..5a7ad0cd163 100644
--- a/stories/components/countdown.stories.js
+++ b/stories/components/countdown.stories.js
@@ -8,25 +8,25 @@ storiesOf('Components', module).addWithChapters('Countdown', {
       sections: [
         {
           title: 'Default',
-          sectionFn: () => <Countdown date={Math.round(new Date() / 1000) + 5000} />
+          sectionFn: () => <Countdown date={Math.round(new Date() / 1000) + 5000} />,
         },
         {
           title: 'Stop after expire',
           sectionFn: () => (
-            <Countdown date={Math.round(new Date() / 1000) + 5000} countUpAfterExpire={false} />
-          )
+            <Countdown date={Math.round(new Date() / 1000) + 5000} isContinual={false} />
+          ),
         },
         {
           title: 'Custom colors',
           sectionFn: () => (
             <Countdown
-              date={Math.round(new Date() / 1000) + 5000}
               colorActive="lightningOrange"
               colorExpired="yellow"
+              date={Math.round(new Date() / 1000) + 5000}
             />
-          )
-        }
-      ]
-    }
-  ]
+          ),
+        },
+      ],
+    },
+  ],
 })
diff --git a/stories/components/dialog.stories.js b/stories/components/dialog.stories.js
index e51f1f15cc0..9cfc3301986 100644
--- a/stories/components/dialog.stories.js
+++ b/stories/components/dialog.stories.js
@@ -6,7 +6,7 @@ import Globe from 'components/Icon/Globe'
 
 storiesOf('Components', module)
   .addDecorator(story => (
-    <Page pl={4} css={{ backgroundColor: '#313340' }}>
+    <Page css={{ backgroundColor: '#313340' }} pl={4}>
       {story()}
     </Page>
   ))
@@ -19,32 +19,32 @@ storiesOf('Components', module)
             title: 'Two buttons',
             sectionFn: () => (
               <Dialog
-                header={`Are you sure you want to delete "MyWallet" ?`}
-                onClose={() => alert('closed')}
                 buttons={[
                   { name: 'Delete', onClick: () => alert('Delete') },
-                  { name: 'Cancel', onClick: () => alert('Cancel') }
+                  { name: 'Cancel', onClick: () => alert('Cancel') },
                 ]}
+                header={`Are you sure you want to delete "MyWallet" ?`}
+                onClose={() => alert('closed')}
               />
-            )
+            ),
           },
           {
             title: 'Message box mode',
             sectionFn: () => (
               <Dialog
+                buttons={[{ name: 'Ok', onClick: () => alert('Ok') }]}
                 header="Your wallet has been removed"
                 onClose={() => alert('closed')}
-                buttons={[{ name: 'Ok', onClick: () => alert('Ok') }]}
               />
-            )
+            ),
           },
           {
             title: 'Custom dialog',
             sectionFn: () => {
               const date = new Date(new Date().getTime() + 60000)
               const customHeader = (
-                <Flex flexDirection="column" alignItems="center" mb={3} alignSelf="stretch">
-                  <Globe width={64} height={64} color="white" />
+                <Flex alignItems="center" alignSelf="stretch" flexDirection="column" mb={3}>
+                  <Globe color="white" height={64} width={64} />
                   <Heading.h2>Custom heading</Heading.h2>
                 </Flex>
               )
@@ -62,19 +62,19 @@ storiesOf('Components', module)
 
               return (
                 <Dialog
+                  buttons={customButtons}
                   header={customHeader}
                   onClose={() => alert('closed')}
-                  buttons={customButtons}
                 >
-                  <Flex flexDirection="column" alignItems="center">
+                  <Flex alignItems="center" flexDirection="column">
                     <Text fontSize="xl">This is a custom body</Text>
                     <Countdown date={date} />
                   </Flex>
                 </Dialog>
               )
-            }
-          }
-        ]
-      }
-    ]
+            },
+          },
+        ],
+      },
+    ],
   })
diff --git a/stories/components/dropdown.stories.js b/stories/components/dropdown.stories.js
index 5ae105325e9..206f87d12f6 100644
--- a/stories/components/dropdown.stories.js
+++ b/stories/components/dropdown.stories.js
@@ -14,19 +14,19 @@ storiesOf('Components', module).addWithChapters('Dropdown', {
             const items = [
               {
                 key: 'btc',
-                name: 'BTC'
+                name: 'BTC',
               },
               {
                 key: 'bits',
-                name: 'bits'
+                name: 'bits',
               },
               {
                 key: 'sats',
-                name: 'satoshis'
-              }
+                name: 'satoshis',
+              },
             ]
             return <Dropdown activeKey={activeKey} items={items} onChange={action('onChange')} />
-          }
+          },
         },
         {
           title: 'Right justify',
@@ -35,28 +35,28 @@ storiesOf('Components', module).addWithChapters('Dropdown', {
             const items = [
               {
                 key: 'usd',
-                name: 'USD'
+                name: 'USD',
               },
               {
                 key: 'eur',
-                name: 'EUR'
+                name: 'EUR',
               },
               {
                 key: 'gbp',
-                name: 'GBP'
-              }
+                name: 'GBP',
+              },
             ]
             return (
               <Dropdown
                 activeKey={activeKey}
                 items={items}
-                onChange={action('onChange')}
                 justify="right"
+                onChange={action('onChange')}
               />
             )
-          }
-        }
-      ]
-    }
-  ]
+          },
+        },
+      ],
+    },
+  ],
 })
diff --git a/stories/components/header.stories.js b/stories/components/header.stories.js
index 86c4c6b3534..58dadc4c0e9 100644
--- a/stories/components/header.stories.js
+++ b/stories/components/header.stories.js
@@ -11,13 +11,13 @@ storiesOf('Components', module).addWithChapters('Header', {
         {
           sectionFn: () => (
             <Header
-              title="This is a heading"
-              subtitle="You can add an optional subtitle too."
               logo={<Lightning />}
+              subtitle="You can add an optional subtitle too."
+              title="This is a heading"
             />
-          )
-        }
-      ]
-    }
-  ]
+          ),
+        },
+      ],
+    },
+  ],
 })
diff --git a/stories/components/loadingbolt.stories.js b/stories/components/loadingbolt.stories.js
index 8c5976a4758..1bf2934e801 100644
--- a/stories/components/loadingbolt.stories.js
+++ b/stories/components/loadingbolt.stories.js
@@ -17,9 +17,9 @@ storiesOf('Components', module).addWithChapters('LoadingBolt', {
                 <LoadingBolt isLoading={isLoading} />
               </Page>
             )
-          }
-        }
-      ]
-    }
-  ]
+          },
+        },
+      ],
+    },
+  ],
 })
diff --git a/stories/components/message.stories.js b/stories/components/message.stories.js
index a6a13c757ac..53b2dcd7837 100644
--- a/stories/components/message.stories.js
+++ b/stories/components/message.stories.js
@@ -9,21 +9,21 @@ storiesOf('Components', module).addWithChapters('Message', {
       sections: [
         {
           title: 'Success',
-          sectionFn: () => <Message variant="success">Success message</Message>
+          sectionFn: () => <Message variant="success">Success message</Message>,
         },
         {
           title: 'Warning',
-          sectionFn: () => <Message variant="warning">Warning message</Message>
+          sectionFn: () => <Message variant="warning">Warning message</Message>,
         },
         {
           title: 'Error',
-          sectionFn: () => <Message variant="error">Error message</Message>
+          sectionFn: () => <Message variant="error">Error message</Message>,
         },
         {
           title: 'Processing',
-          sectionFn: () => <Message variant="processing">Processing</Message>
-        }
-      ]
-    }
-  ]
+          sectionFn: () => <Message variant="processing">Processing</Message>,
+        },
+      ],
+    },
+  ],
 })
diff --git a/stories/components/modal.stories.js b/stories/components/modal.stories.js
index 3cf43ffefbb..6c7e21b61bf 100644
--- a/stories/components/modal.stories.js
+++ b/stories/components/modal.stories.js
@@ -13,10 +13,10 @@ storiesOf('Components', module).addWithChapters('Modal', {
       sections: [
         {
           sectionFn: () => {
-            const withHeader = boolean('With header', false)
+            const hasHeader = boolean('With header', false)
             return (
               <Page>
-                <Modal onClose={action('clicked')} withHeader={withHeader}>
+                <Modal hasHeader={hasHeader} onClose={action('clicked')}>
                   <Text>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                     incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
@@ -28,9 +28,9 @@ storiesOf('Components', module).addWithChapters('Modal', {
                 </Modal>
               </Page>
             )
-          }
-        }
-      ]
-    }
-  ]
+          },
+        },
+      ],
+    },
+  ],
 })
diff --git a/stories/components/notification.stories.js b/stories/components/notification.stories.js
index a1119e883be..416f60c7119 100644
--- a/stories/components/notification.stories.js
+++ b/stories/components/notification.stories.js
@@ -9,25 +9,25 @@ storiesOf('Components', module).addWithChapters('Notification', {
       sections: [
         {
           title: 'Success',
-          sectionFn: () => <Notification variant="success">Success notification</Notification>
+          sectionFn: () => <Notification variant="success">Success notification</Notification>,
         },
         {
           title: 'Warning',
-          sectionFn: () => <Notification variant="warning">Warning notification</Notification>
+          sectionFn: () => <Notification variant="warning">Warning notification</Notification>,
         },
         {
           title: 'Error',
-          sectionFn: () => <Notification variant="error">Error notification</Notification>
+          sectionFn: () => <Notification variant="error">Error notification</Notification>,
         },
         {
           title: 'Processing',
           sectionFn: () => (
-            <Notification variant="warning" processing>
+            <Notification isProcessing variant="warning">
               Processing notification
             </Notification>
-          )
-        }
-      ]
-    }
-  ]
+          ),
+        },
+      ],
+    },
+  ],
 })
diff --git a/stories/components/progressbar.stories.js b/stories/components/progressbar.stories.js
index 650fc3f2efd..02164f3c401 100644
--- a/stories/components/progressbar.stories.js
+++ b/stories/components/progressbar.stories.js
@@ -10,25 +10,25 @@ storiesOf('Components', module).addWithChapters('ProgressBar', {
       sections: [
         {
           title: 'Default, 0%',
-          sectionFn: () => <ProgressBar />
+          sectionFn: () => <ProgressBar />,
         },
         {
           title: 'Default, 30%',
-          sectionFn: () => <ProgressBar progress={0.3} />
+          sectionFn: () => <ProgressBar progress={0.3} />,
         },
         {
           title: 'Default, 70%, right justify',
-          sectionFn: () => <ProgressBar progress={0.7} justify="right" />
+          sectionFn: () => <ProgressBar justify="right" progress={0.7} />,
         },
         {
           title: 'Blue, 70%',
-          sectionFn: () => <ProgressBar progress={0.7} color="superBlue" />
+          sectionFn: () => <ProgressBar color="superBlue" progress={0.7} />,
         },
         {
           title: 'Blue, 30%, right justify',
-          sectionFn: () => <ProgressBar progress={0.3} justify="right" color="superBlue" />
-        }
-      ]
-    }
-  ]
+          sectionFn: () => <ProgressBar color="superBlue" justify="right" progress={0.3} />,
+        },
+      ],
+    },
+  ],
 })
diff --git a/stories/components/qrcode.stories.js b/stories/components/qrcode.stories.js
index 2582bebf343..60f7667f9b6 100644
--- a/stories/components/qrcode.stories.js
+++ b/stories/components/qrcode.stories.js
@@ -16,30 +16,30 @@ storiesOf('Components', module).addWithChapters('QR Code', {
           sectionFn: () => (
             /* eslint-disable max-len */
             <>
-              <QRCode size="small" value={code} mr={4} />
-              <QRCode size="small" value={code} obfuscate />
+              <QRCode mr={4} size="small" value={code} />
+              <QRCode isObfuscated size="small" value={code} />
             </>
-          )
+          ),
         },
         {
           title: 'medium',
           sectionFn: () => (
             <>
-              <QRCode size="medium" value={code} mr={4} />
-              <QRCode size="medium" value={code} obfuscate />
+              <QRCode mr={4} size="medium" value={code} />
+              <QRCode isObfuscated size="medium" value={code} />
             </>
-          )
+          ),
         },
         {
           title: 'large',
           sectionFn: () => (
             <>
-              <QRCode size="large" value={code} mr={4} />
-              <QRCode size="large" value={code} obfuscate />
+              <QRCode mr={4} size="large" value={code} />
+              <QRCode isObfuscated size="large" value={code} />
             </>
-          )
-        }
-      ]
-    }
-  ]
+          ),
+        },
+      ],
+    },
+  ],
 })
diff --git a/stories/components/spinner.stories.js b/stories/components/spinner.stories.js
index 745ff5709e9..e83f168a24f 100644
--- a/stories/components/spinner.stories.js
+++ b/stories/components/spinner.stories.js
@@ -9,9 +9,9 @@ storiesOf('Components', module).addWithChapters('Spinner', {
     {
       sections: [
         {
-          sectionFn: () => <Spinner />
-        }
-      ]
-    }
-  ]
+          sectionFn: () => <Spinner />,
+        },
+      ],
+    },
+  ],
 })
diff --git a/stories/components/statusindicator.stories.js b/stories/components/statusindicator.stories.js
index a56e26550a3..c1991087b84 100644
--- a/stories/components/statusindicator.stories.js
+++ b/stories/components/statusindicator.stories.js
@@ -9,21 +9,21 @@ storiesOf('Components', module).addWithChapters('StatusIndicator', {
       sections: [
         {
           title: 'Online',
-          sectionFn: () => <StatusIndicator variant="online" />
+          sectionFn: () => <StatusIndicator variant="online" />,
         },
         {
           title: 'Pending',
-          sectionFn: () => <StatusIndicator variant="pending" />
+          sectionFn: () => <StatusIndicator variant="pending" />,
         },
         {
           title: 'Closing',
-          sectionFn: () => <StatusIndicator variant="closing" />
+          sectionFn: () => <StatusIndicator variant="closing" />,
         },
         {
           title: 'Offline',
-          sectionFn: () => <StatusIndicator variant="offline" />
-        }
-      ]
-    }
-  ]
+          sectionFn: () => <StatusIndicator variant="offline" />,
+        },
+      ],
+    },
+  ],
 })
diff --git a/stories/components/tabs.stories.js b/stories/components/tabs.stories.js
index d93112780f4..1d9f212dd26 100644
--- a/stories/components/tabs.stories.js
+++ b/stories/components/tabs.stories.js
@@ -4,11 +4,11 @@ import { State, Store } from '@sambego/storybook-state'
 import { Tabs } from 'components/UI'
 
 const store = new Store({
-  activeKey: 'all'
+  activeKey: 'all',
 })
 
 const dispatchProps = {
-  onClick: activeKey => store.set({ activeKey })
+  onClick: activeKey => store.set({ activeKey }),
 }
 storiesOf('Components', module).addWithChapters('Tabs', {
   subtitle: 'List of buttons formatted as tabs',
@@ -26,14 +26,14 @@ storiesOf('Components', module).addWithChapters('Tabs', {
                     { key: 'all', name: 'All' },
                     { key: 'sent', name: 'Send' },
                     { key: 'received', name: 'Received' },
-                    { key: 'pending', name: 'Pending' }
+                    { key: 'pending', name: 'Pending' },
                   ]}
                 />
               )}
             </State>
-          )
-        }
-      ]
-    }
-  ]
+          ),
+        },
+      ],
+    },
+  ],
 })
diff --git a/stories/containers/activity.stories.js b/stories/containers/activity.stories.js
index 713d427c2b8..f2b1cdf7e2a 100644
--- a/stories/containers/activity.stories.js
+++ b/stories/containers/activity.stories.js
@@ -23,21 +23,21 @@ storiesOf('Containers.Activity', module)
       tags: [
         {
           tagName: 'purpose_commit_hash',
-          data: '3925b6f67e2c340036ed12093dd44e0368df1b6ea26c53dbe4811f58fd5db8c1'
+          data: '3925b6f67e2c340036ed12093dd44e0368df1b6ea26c53dbe4811f58fd5db8c1',
         },
         {
           tagName: 'payment_hash',
-          data: '0001020304050607080900010203040506070809000102030405060708090102'
+          data: '0001020304050607080900010203040506070809000102030405060708090102',
         },
         {
           tagName: 'expire_time',
-          data: 15
+          data: 15,
         },
         {
           tagName: 'description',
-          data: 'Some items'
-        }
-      ]
+          data: 'Some items',
+        },
+      ],
     })
     const privateKeyHex = 'e126f68f7eafcc8b74f54d269fe206be715000f94dac067d1c04a8ca3b2db734'
     const signed = lightningPayReq.sign(encoded, privateKeyHex)
@@ -48,14 +48,14 @@ storiesOf('Containers.Activity', module)
       settle_date: Math.round(new Date().getTime() / 1000),
       payment_request: signed.paymentRequest,
       memo: signed.tags.find(t => t.tagName === 'description').data,
-      tx_hash: '1ae44a23c141a2892c55eb3fe9de45195d88e89b36b5070e10df92d4130e4028'
+      tx_hash: '1ae44a23c141a2892c55eb3fe9de45195d88e89b36b5070e10df92d4130e4028',
     }
     return (
       <InvoiceModal
-        width={9 / 16}
-        mx="auto"
         item={invoice}
+        mx="auto"
         showNotification={action('showNotification')}
+        width={9 / 16}
       />
     )
   })
@@ -63,9 +63,9 @@ storiesOf('Containers.Activity', module)
     const payment = {
       value: 15000,
       creation_date: Math.round(new Date().getTime() / 1000),
-      payment_preimage: '46914421ed5eafea1ec40726338bc5059e80e128660b9c7c8a5817e59429af30'
+      payment_preimage: '46914421ed5eafea1ec40726338bc5059e80e128660b9c7c8a5817e59429af30',
     }
-    return <PaymentModal width={9 / 16} mx="auto" item={payment} />
+    return <PaymentModal item={payment} mx="auto" width={9 / 16} />
   })
   .add('TransactionModal', () => {
     const transaction = {
@@ -76,14 +76,14 @@ storiesOf('Containers.Activity', module)
       dest_addresses: ['2NEEBwPWMQ2CDurRzWgCETwuXvzgZ6pqzY8'],
       block_height: 555466,
       block_hash: '000000000012ac9338c1b53499dfcd6c44c4b96b40e038f4536639d3c3852169',
-      tx_hash: '1ae44a23c141a2892c55eb3fe9de45195d88e89b36b5070e10df92d4130e4028'
+      tx_hash: '1ae44a23c141a2892c55eb3fe9de45195d88e89b36b5070e10df92d4130e4028',
     }
     return (
       <TransactionModal
-        width={9 / 16}
-        mx="auto"
         item={transaction}
+        mx="auto"
         networkInfo={infoSelectors.networkInfo(store.getState())}
+        width={9 / 16}
       />
     )
   })
diff --git a/stories/containers/channels/channel-balance.stories.js b/stories/containers/channels/channel-balance.stories.js
index e0c5f391f3f..725c012bc67 100644
--- a/stories/containers/channels/channel-balance.stories.js
+++ b/stories/containers/channels/channel-balance.stories.js
@@ -15,9 +15,9 @@ storiesOf('Containers.Channels', module)
             sectionFn: () => {
               const channelBalance = number('Channel Balance', 1237474)
               return <ChannelBalance channelBalance={channelBalance} />
-            }
-          }
-        ]
-      }
-    ]
+            },
+          },
+        ],
+      },
+    ],
   })
diff --git a/stories/containers/channels/channel-capacity.stories.js b/stories/containers/channels/channel-capacity.stories.js
index 5bb84488756..3bc3baf5be0 100644
--- a/stories/containers/channels/channel-capacity.stories.js
+++ b/stories/containers/channels/channel-capacity.stories.js
@@ -16,9 +16,9 @@ storiesOf('Containers.Channels', module)
               const localBalance = number('Local Balance', 150000)
               const remoteBalance = number('Remote Balance', 75000)
               return <ChannelCapacity localBalance={localBalance} remoteBalance={remoteBalance} />
-            }
-          }
-        ]
-      }
-    ]
+            },
+          },
+        ],
+      },
+    ],
   })
diff --git a/stories/containers/channels/channel-card-list-item.stories.js b/stories/containers/channels/channel-card-list-item.stories.js
index 3ff540f5fa8..d5d929d531d 100644
--- a/stories/containers/channels/channel-card-list-item.stories.js
+++ b/stories/containers/channels/channel-card-list-item.stories.js
@@ -38,27 +38,27 @@ storiesOf('Containers.Channels', module)
                     'pending_close',
                     'pending_force_close',
                     'waiting_close',
-                    'offline'
+                    'offline',
                   ],
                   'open'
                 ),
-                active: true
+                active: true,
               }
 
               const state = store.getState()
               const stateProps = {
                 channel,
                 networkInfo: infoSelectors.networkInfo(state),
-                currencyName: tickerSelectors.currencyName(state)
+                currencyName: tickerSelectors.currencyName(state),
               }
               const dispatchProps = {
-                setSelectedChannel
+                setSelectedChannel,
               }
 
               return <ChannelCardListItem {...stateProps} {...dispatchProps} width={0.5} />
-            }
-          }
-        ]
-      }
-    ]
+            },
+          },
+        ],
+      },
+    ],
   })
diff --git a/stories/containers/channels/channel-card-list.stories.js b/stories/containers/channels/channel-card-list.stories.js
index 5351b4c45b4..2f7e20acfc7 100644
--- a/stories/containers/channels/channel-card-list.stories.js
+++ b/stories/containers/channels/channel-card-list.stories.js
@@ -15,7 +15,7 @@ const channels = [
     local_balance: 686679,
     remote_balance: 75000,
     display_status: 'open',
-    active: true
+    active: true,
   },
   {
     chan_id: 2,
@@ -25,7 +25,7 @@ const channels = [
     local_balance: 1000,
     remote_balance: 10909,
     display_status: 'open',
-    active: true
+    active: true,
   },
   {
     chan_id: 3,
@@ -35,7 +35,7 @@ const channels = [
     local_balance: 48887,
     remote_balance: 89987,
     display_status: 'loading',
-    active: false
+    active: false,
   },
   {
     // chan_id: 4,
@@ -45,7 +45,7 @@ const channels = [
     local_balance: 686679,
     remote_balance: 75000,
     display_status: 'pending_open',
-    active: false
+    active: false,
   },
   {
     // chan_id: 5,
@@ -55,7 +55,7 @@ const channels = [
     local_balance: 345,
     remote_balance: 5607,
     display_status: 'pending_close',
-    active: false
+    active: false,
   },
   {
     // chan_id: 6,
@@ -65,7 +65,7 @@ const channels = [
     local_balance: 1345,
     remote_balance: 65435,
     display_status: 'pending_force_close',
-    active: false
+    active: false,
   },
   {
     // chan_id: 7,
@@ -75,7 +75,7 @@ const channels = [
     local_balance: 6932868,
     remote_balance: 4346674,
     display_status: 'waiting_close',
-    active: false
+    active: false,
   },
   {
     chan_id: 8,
@@ -85,8 +85,8 @@ const channels = [
     local_balance: 4677,
     remote_balance: 465,
     display_status: 'offline',
-    active: false
-  }
+    active: false,
+  },
 ]
 
 const setSelectedChannel = action('setSelectedChannel')
@@ -104,16 +104,16 @@ storiesOf('Containers.Channels', module)
               const stateProps = {
                 channels,
                 networkInfo: infoSelectors.networkInfo(state),
-                currencyName: tickerSelectors.currencyName(state)
+                currencyName: tickerSelectors.currencyName(state),
               }
               const dispatchProps = {
-                setSelectedChannel
+                setSelectedChannel,
               }
 
               return <ChannelCardList {...stateProps} {...dispatchProps} />
-            }
-          }
-        ]
-      }
-    ]
+            },
+          },
+        ],
+      },
+    ],
   })
diff --git a/stories/containers/channels/channel-count.stories.js b/stories/containers/channels/channel-count.stories.js
index 7ca21956a6c..891fc7bcfd0 100644
--- a/stories/containers/channels/channel-count.stories.js
+++ b/stories/containers/channels/channel-count.stories.js
@@ -14,19 +14,19 @@ storiesOf('Containers.Channels', module)
             sectionFn: () => {
               const channels = [
                 {
-                  key: 1
+                  key: 1,
                 },
                 {
-                  key: 2
+                  key: 2,
                 },
                 {
-                  key: 3
-                }
+                  key: 3,
+                },
               ]
               return <ChannelCount channels={channels} />
-            }
-          }
-        ]
-      }
-    ]
+            },
+          },
+        ],
+      },
+    ],
   })
diff --git a/stories/containers/channels/channel-create-form.stories.js b/stories/containers/channels/channel-create-form.stories.js
index f5a11e74703..e92e10511f6 100644
--- a/stories/containers/channels/channel-create-form.stories.js
+++ b/stories/containers/channels/channel-create-form.stories.js
@@ -14,4 +14,4 @@ storiesOf('Containers.Channels', module)
       <Modal onClose={action('clicked')}>{story()}</Modal>
     </Window>
   ))
-  .add('ChannelCreateForm', () => <ChannelCreateForm width={9 / 16} mx="auto" />)
+  .add('ChannelCreateForm', () => <ChannelCreateForm mx="auto" width={9 / 16} />)
diff --git a/stories/containers/channels/channel-create-summary.stories.js b/stories/containers/channels/channel-create-summary.stories.js
index 08c9f48efde..c48d0bb913f 100644
--- a/stories/containers/channels/channel-create-summary.stories.js
+++ b/stories/containers/channels/channel-create-summary.stories.js
@@ -17,12 +17,12 @@ storiesOf('Containers.Channels', module)
                 fee: 88,
                 speed: 'TRANSACTION_SPEED_SLOW',
                 nodePubkey: '03cf5a37ed661e3c61c7943941834771631cd880985340ed7543ad79a968cea454',
-                nodeDisplayName: 'Sparky'
+                nodeDisplayName: 'Sparky',
               }
               return <ChannelCreateSummary {...stateProps} />
-            }
-          }
-        ]
-      }
-    ]
+            },
+          },
+        ],
+      },
+    ],
   })
diff --git a/stories/containers/channels/channel-status.stories.js b/stories/containers/channels/channel-status.stories.js
index 4f10d2e0352..e15df7c6f85 100644
--- a/stories/containers/channels/channel-status.stories.js
+++ b/stories/containers/channels/channel-status.stories.js
@@ -5,35 +5,35 @@ import { ChannelStatus } from 'components/Channels'
 storiesOf('Containers.Channels', module)
   .addParameters({
     info: {
-      disable: true
-    }
+      disable: true,
+    },
   })
   .addWithChapters('ChannelStatus', {
     chapters: [
       {
         sections: [
           {
-            sectionFn: () => <ChannelStatus status="loading" />
+            sectionFn: () => <ChannelStatus status="loading" />,
           },
           {
-            sectionFn: () => <ChannelStatus status="pending_open" />
+            sectionFn: () => <ChannelStatus status="pending_open" />,
           },
           {
-            sectionFn: () => <ChannelStatus status="open" />
+            sectionFn: () => <ChannelStatus status="open" />,
           },
           {
-            sectionFn: () => <ChannelStatus status="pending_close" />
+            sectionFn: () => <ChannelStatus status="pending_close" />,
           },
           {
-            sectionFn: () => <ChannelStatus status="pending_force_close" />
+            sectionFn: () => <ChannelStatus status="pending_force_close" />,
           },
           {
-            sectionFn: () => <ChannelStatus status="waiting_close" />
+            sectionFn: () => <ChannelStatus status="waiting_close" />,
           },
           {
-            sectionFn: () => <ChannelStatus status="offline" />
-          }
-        ]
-      }
-    ]
+            sectionFn: () => <ChannelStatus status="offline" />,
+          },
+        ],
+      },
+    ],
   })
diff --git a/stories/containers/channels/channel-summary-list-item.stories.js b/stories/containers/channels/channel-summary-list-item.stories.js
index f3a15699bfa..1b76851af3a 100644
--- a/stories/containers/channels/channel-summary-list-item.stories.js
+++ b/stories/containers/channels/channel-summary-list-item.stories.js
@@ -36,24 +36,24 @@ storiesOf('Containers.Channels', module)
                     'pending_close',
                     'pending_force_close',
                     'waiting_close',
-                    'offline'
+                    'offline',
                   ],
                   'open'
                 ),
-                active: true
+                active: true,
               }
 
               const stateProps = {
-                channel
+                channel,
               }
               const dispatchProps = {
-                setSelectedChannel
+                setSelectedChannel,
               }
 
               return <ChannelSummaryListItem {...stateProps} {...dispatchProps} />
-            }
-          }
-        ]
-      }
-    ]
+            },
+          },
+        ],
+      },
+    ],
   })
diff --git a/stories/containers/channels/channel-summary-list.stories.js b/stories/containers/channels/channel-summary-list.stories.js
index 74f48cebe28..6ee30efba12 100644
--- a/stories/containers/channels/channel-summary-list.stories.js
+++ b/stories/containers/channels/channel-summary-list.stories.js
@@ -13,7 +13,7 @@ const channels = [
     local_balance: 686679,
     remote_balance: 75000,
     display_status: 'open',
-    active: true
+    active: true,
   },
   {
     chan_id: 2,
@@ -23,7 +23,7 @@ const channels = [
     local_balance: 1000,
     remote_balance: 10909,
     display_status: 'open',
-    active: true
+    active: true,
   },
   {
     chan_id: 3,
@@ -33,7 +33,7 @@ const channels = [
     local_balance: 48887,
     remote_balance: 89987,
     display_status: 'loading',
-    active: false
+    active: false,
   },
   {
     // chan_id: 4,
@@ -43,7 +43,7 @@ const channels = [
     local_balance: 686679,
     remote_balance: 75000,
     display_status: 'pending_open',
-    active: false
+    active: false,
   },
   {
     // chan_id: 5,
@@ -53,7 +53,7 @@ const channels = [
     local_balance: 345,
     remote_balance: 5607,
     display_status: 'pending_close',
-    active: false
+    active: false,
   },
   {
     // chan_id: 6,
@@ -63,7 +63,7 @@ const channels = [
     local_balance: 1345,
     remote_balance: 65435,
     display_status: 'pending_force_close',
-    active: false
+    active: false,
   },
   {
     // chan_id: 7,
@@ -73,7 +73,7 @@ const channels = [
     local_balance: 6932868,
     remote_balance: 4346674,
     display_status: 'waiting_close',
-    active: false
+    active: false,
   },
   {
     chan_id: 8,
@@ -83,8 +83,8 @@ const channels = [
     local_balance: 4677,
     remote_balance: 465,
     display_status: 'offline',
-    active: false
-  }
+    active: false,
+  },
 ]
 
 const setSelectedChannel = action('setSelectedChannel')
@@ -99,13 +99,13 @@ storiesOf('Containers.Channels', module)
           {
             sectionFn: () => {
               const dispatchProps = {
-                setSelectedChannel
+                setSelectedChannel,
               }
 
               return <ChannelSummaryList channels={channels} {...dispatchProps} />
-            }
-          }
-        ]
-      }
-    ]
+            },
+          },
+        ],
+      },
+    ],
   })
diff --git a/stories/containers/channels/channels-header.stories.js b/stories/containers/channels/channels-header.stories.js
index 48391155315..f09eb3f30fb 100644
--- a/stories/containers/channels/channels-header.stories.js
+++ b/stories/containers/channels/channels-header.stories.js
@@ -16,19 +16,19 @@ storiesOf('Containers.Channels', module)
               const channelBalance = number('Channel', 2343455)
               const channels = [
                 {
-                  key: 1
+                  key: 1,
                 },
                 {
-                  key: 2
+                  key: 2,
                 },
                 {
-                  key: 3
-                }
+                  key: 3,
+                },
               ]
-              return <ChannelsHeader channels={channels} channelBalance={channelBalance} />
-            }
-          }
-        ]
-      }
-    ]
+              return <ChannelsHeader channelBalance={channelBalance} channels={channels} />
+            },
+          },
+        ],
+      },
+    ],
   })
diff --git a/stories/containers/channels/node-card-list.stories.js b/stories/containers/channels/node-card-list.stories.js
index 462df61756b..3cf378585a5 100644
--- a/stories/containers/channels/node-card-list.stories.js
+++ b/stories/containers/channels/node-card-list.stories.js
@@ -23,7 +23,7 @@ storiesOf('Containers.Channels', module)
                   description: 'Making Bitcoin usable for everyone',
                   image:
                     'https://pbs.twimg.com/profile_images/1062081653013647360/X2pAwJEu_400x400.jpg',
-                  nodeClicked
+                  nodeClicked,
                 },
                 {
                   pubkey: '03e50492eab4107a773141bb419e107bda3de3d55652e6e1a41225f06a0bbf2d56',
@@ -32,7 +32,7 @@ storiesOf('Containers.Channels', module)
                   description: 'Read and write articles, with Lightning Network micropayments.',
                   image:
                     'https://pbs.twimg.com/profile_images/947351277293338624/fE1wDin7_400x400.jpg',
-                  nodeClicked
+                  nodeClicked,
                 },
                 {
                   pubkey: '030c3f19d742ca294a55c00376b3b355c3c90d61c6b6b39554dbc7ac19b141c14f',
@@ -41,7 +41,7 @@ storiesOf('Containers.Channels', module)
                   description: 'Live on Crypto',
                   image:
                     'https://pbs.twimg.com/profile_images/986911852943822849/f3eaWp7P_400x400.jpg',
-                  nodeClicked
+                  nodeClicked,
                 },
                 {
                   pubkey: '03c2abfa93eacec04721c019644584424aab2ba4dff3ac9bdab4e9c97007491dda',
@@ -50,7 +50,7 @@ storiesOf('Containers.Channels', module)
                   description: 'Receive tips and micro-payments everywhere.',
                   image:
                     'https://pbs.twimg.com/profile_images/1079148262601490432/nMPkPaoH_400x400.jpg',
-                  nodeClicked
+                  nodeClicked,
                 },
                 {
                   pubkey: '03abf6f44c355dec0d5aa155bdbdd6e0c8fefe318eff402de65c6eb2e1be55dc3e',
@@ -59,7 +59,7 @@ storiesOf('Containers.Channels', module)
                   description: 'Bitcoin, for everyday',
                   image:
                     'https://pbs.twimg.com/profile_images/1075120214549745664/-UrFQ6A7_400x400.jpg',
-                  nodeClicked
+                  nodeClicked,
                 },
                 {
                   pubkey: '0331f80652fb840239df8dc99205792bba2e559a05469915804c08420230e23c7c',
@@ -67,14 +67,14 @@ storiesOf('Containers.Channels', module)
                   nickname: 'Lightning Power Users',
                   description: 'Helping on-board the next wave of BTC/LN users',
                   image: 'https://lightningpowerusers.com/static/img/small_badger.png',
-                  nodeClicked
-                }
+                  nodeClicked,
+                },
               ]
 
               return <NodeCardList nodes={nodes} />
-            }
-          }
-        ]
-      }
-    ]
+            },
+          },
+        ],
+      },
+    ],
   })
diff --git a/stories/containers/channels/node-card-view.stories.js b/stories/containers/channels/node-card-view.stories.js
index 88c6c44c1ea..b38902abf11 100644
--- a/stories/containers/channels/node-card-view.stories.js
+++ b/stories/containers/channels/node-card-view.stories.js
@@ -21,16 +21,16 @@ storiesOf('Containers.Channels', module)
                 image:
                   'https://pbs.twimg.com/profile_images/1062081653013647360/X2pAwJEu_400x400.jpg',
                 nickname: 'Zap technologies',
-                pubkey: '03634bda49c9c42afd876d8288802942c49e58fbec3844ff54b46143bfcb6cdfaf'
+                pubkey: '03634bda49c9c42afd876d8288802942c49e58fbec3844ff54b46143bfcb6cdfaf',
               }
               const dispatchProps = {
-                nodeClicked
+                nodeClicked,
               }
 
               return <NodeCardView {...stateProps} {...dispatchProps} width={1 / 3} />
-            }
-          }
-        ]
-      }
-    ]
+            },
+          },
+        ],
+      },
+    ],
   })
diff --git a/stories/containers/home.stories.js b/stories/containers/home.stories.js
index 2f2abb9e914..df877b8f924 100644
--- a/stories/containers/home.stories.js
+++ b/stories/containers/home.stories.js
@@ -21,7 +21,7 @@ const wallets = [
     autopilotPrivate: true,
     chain: 'bitcoin',
     network: 'testnet',
-    type: 'local'
+    type: 'local',
   },
   {
     id: 2,
@@ -29,21 +29,21 @@ const wallets = [
     chain: 'bitcoin',
     network: 'mainnet',
     type: 'local',
-    name: 'Small Change'
+    name: 'Small Change',
   },
   {
     id: 3,
     type: 'custom',
     chain: 'bitcoin',
     network: 'testnet',
-    host: 'mynode.local'
+    host: 'mynode.local',
   },
   {
     id: 4,
     type: 'btcpayserver',
     chain: 'bitcoin',
     network: 'testnet',
-    host: 'example.btcpaywithreallylongname.store'
+    host: 'example.btcpaywithreallylongname.store',
   },
   {
     id: 5,
@@ -51,8 +51,8 @@ const wallets = [
     chain: 'bitcoin',
     network: 'testnet',
     host: 'example.btcpay.store',
-    name: 'The Lightning Store'
-  }
+    name: 'The Lightning Store',
+  },
 ]
 
 const showError = async error => {
@@ -64,17 +64,17 @@ const setStartLndError = async error => {
 const startLnd = async wallet => {
   console.log('startLnd', wallet)
   await delay(500)
-  store.set({ walletUnlockerGrpcActive: true, lightningGrpcActive: false })
+  store.set({ isWalletUnlockerGrpcActive: true, isLightningGrpcActive: false })
 }
 const stopLnd = async () => {
   console.log('stopLnd')
   await delay(500)
-  store.set({ walletUnlockerGrpcActive: false, lightningGrpcActive: false })
+  store.set({ isWalletUnlockerGrpcActive: false, isLightningGrpcActive: false })
 }
 const unlockWallet = async (wallet, password) => {
   console.log('unlockWallet', wallet, password)
   await delay(300)
-  store.set({ walletUnlockerGrpcActive: false, lightningGrpcActive: true })
+  store.set({ isWalletUnlockerGrpcActive: false, isLightningGrpcActive: true })
 }
 const deleteWallet = async walletId => {
   console.log('deleteWallet', walletId)
@@ -89,7 +89,7 @@ storiesOf('Containers.Home', module)
     StoryRouter({
       '/onboarding': linkTo('Containers.Onboarding', 'Onboarding'),
       '/syncing': linkTo('Containers.Syncing', 'Syncing'),
-      '/app': linkTo('Containers.App', 'App')
+      '/app': linkTo('Containers.App', 'App'),
     })
   )
   .addDecorator(story => <Provider story={story()} />)
@@ -98,16 +98,16 @@ storiesOf('Containers.Home', module)
     const hasWallets = boolean('Has wallets', true)
     return (
       <Home
-        wallets={hasWallets ? wallets : []}
-        startLnd={startLnd}
-        stopLnd={stopLnd}
-        unlockWallet={unlockWallet}
         deleteWallet={deleteWallet}
-        showError={showError}
-        setStartLndError={setStartLndError}
-        setUnlockWalletError={setUnlockWalletError}
         setActiveWallet={setActiveWallet}
         setIsWalletOpen={action('setIsWalletOpen')}
+        setStartLndError={setStartLndError}
+        setUnlockWalletError={setUnlockWalletError}
+        showError={showError}
+        startLnd={startLnd}
+        stopLnd={stopLnd}
+        unlockWallet={unlockWallet}
+        wallets={hasWallets ? wallets : []}
       />
     )
   })
diff --git a/stories/containers/home/WalletHeader.stories.js b/stories/containers/home/WalletHeader.stories.js
index 5d3f6491950..628295cf5ca 100644
--- a/stories/containers/home/WalletHeader.stories.js
+++ b/stories/containers/home/WalletHeader.stories.js
@@ -13,13 +13,13 @@ storiesOf('Containers.Home', module).addWithChapters('WalletHeader', {
             <WalletHeader
               wallet={{
                 type: 'local',
-                Name: 'Small Changee'
+                Name: 'Small Changee',
               }}
             />
           ),
           options: {
-            decorator: story => <Text>{story()}</Text>
-          }
+            decorator: story => <Text>{story()}</Text>,
+          },
         },
         {
           title: 'Wallet with long name',
@@ -27,15 +27,15 @@ storiesOf('Containers.Home', module).addWithChapters('WalletHeader', {
             <WalletHeader
               wallet={{
                 type: 'custom',
-                host: 'example.btcpaywithareallyreallylongnamethatdoesntfitwell.store'
+                host: 'example.btcpaywithareallyreallylongnamethatdoesntfitwell.store',
               }}
             />
           ),
           options: {
-            decorator: story => <Text>{story()}</Text>
-          }
-        }
-      ]
-    }
-  ]
+            decorator: story => <Text>{story()}</Text>,
+          },
+        },
+      ],
+    },
+  ],
 })
diff --git a/stories/containers/home/WalletName.stories.js b/stories/containers/home/WalletName.stories.js
index eb9310610ca..f82307515e6 100644
--- a/stories/containers/home/WalletName.stories.js
+++ b/stories/containers/home/WalletName.stories.js
@@ -15,13 +15,13 @@ storiesOf('Containers.Home', module).addWithChapters('WalletName', {
                 type: 'local',
                 id: 1,
                 host: 'local.host',
-                name: 'Wallet name'
+                name: 'Wallet name',
               }}
             />
           ),
           options: {
-            decorator: story => <Text>{story()}</Text>
-          }
+            decorator: story => <Text>{story()}</Text>,
+          },
         },
         {
           title: 'Local wallet, without name',
@@ -30,13 +30,13 @@ storiesOf('Containers.Home', module).addWithChapters('WalletName', {
               wallet={{
                 type: 'local',
                 id: 1,
-                host: 'local.host'
+                host: 'local.host',
               }}
             />
           ),
           options: {
-            decorator: story => <Text>{story()}</Text>
-          }
+            decorator: story => <Text>{story()}</Text>,
+          },
         },
         {
           title: 'Custom wallet, with name',
@@ -46,13 +46,13 @@ storiesOf('Containers.Home', module).addWithChapters('WalletName', {
                 type: 'custom',
                 id: 1,
                 host: 'local.host',
-                name: 'Wallet name'
+                name: 'Wallet name',
               }}
             />
           ),
           options: {
-            decorator: story => <Text>{story()}</Text>
-          }
+            decorator: story => <Text>{story()}</Text>,
+          },
         },
         {
           title: 'Custom wallet, without name',
@@ -61,15 +61,15 @@ storiesOf('Containers.Home', module).addWithChapters('WalletName', {
               wallet={{
                 type: 'custom',
                 id: 1,
-                host: 'local.host'
+                host: 'local.host',
               }}
             />
           ),
           options: {
-            decorator: story => <Text>{story()}</Text>
-          }
-        }
-      ]
-    }
-  ]
+            decorator: story => <Text>{story()}</Text>,
+          },
+        },
+      ],
+    },
+  ],
 })
diff --git a/stories/containers/onboarding.stories.js b/stories/containers/onboarding.stories.js
index 54a21e8a22f..a52d9121851 100644
--- a/stories/containers/onboarding.stories.js
+++ b/stories/containers/onboarding.stories.js
@@ -30,8 +30,8 @@ const initialValues = {
   startLndMacaroonError: '',
   password: '',
   seed: [],
-  onboarded: false,
-  onboarding: true
+  isOnboarded: false,
+  onboarding: true,
 }
 
 const store = new Store(initialValues)
@@ -49,7 +49,7 @@ const resetOnboarding = () => {
 }
 
 const fetchSeed = async () => {
-  store.set({ fetchingSeed: true })
+  store.set({ isFetchingSeed: true })
   await delay(1000)
   store.set({
     seed: [
@@ -76,10 +76,10 @@ const fetchSeed = async () => {
       'slender',
       'blue',
       'day',
-      'fix'
-    ]
+      'fix',
+    ],
   })
-  store.set({ fetchingSeed: false })
+  store.set({ isFetchingSeed: false })
 }
 
 const startLnd = async () => {
@@ -125,22 +125,22 @@ storiesOf('Containers.Onboarding', module)
       <State store={store}>
         <Onboarding
           // DISPATCH
+          createNewWallet={createNewWallet}
+          fetchSeed={fetchSeed}
+          recoverOldWallet={recoverOldWallet}
           resetOnboarding={resetOnboarding}
-          setName={setName}
           setAutopilot={setAutopilot}
-          setConnectionType={setConnectionType}
-          setConnectionHost={setConnectionHost}
           setConnectionCert={setConnectionCert}
+          setConnectionHost={setConnectionHost}
           setConnectionMacaroon={setConnectionMacaroon}
+          setConnectionType={setConnectionType}
+          setName={setName}
           setPassword={setPassword}
-          createNewWallet={createNewWallet}
-          recoverOldWallet={recoverOldWallet}
           startLnd={startLnd}
           stopLnd={stopLnd}
-          validateHost={validateHost}
           validateCert={validateCert}
+          validateHost={validateHost}
           validateMacaroon={validateMacaroon}
-          fetchSeed={fetchSeed}
         />
       </State>
     )
diff --git a/stories/containers/onboarding/onboarding.component.stories.js b/stories/containers/onboarding/onboarding.component.stories.js
index 962963cc1f7..a2ce6f98da3 100644
--- a/stories/containers/onboarding/onboarding.component.stories.js
+++ b/stories/containers/onboarding/onboarding.component.stories.js
@@ -11,7 +11,7 @@ import {
   Password,
   Recover,
   SeedConfirm,
-  SeedView
+  SeedView,
 } from 'components/Onboarding/Steps'
 
 const setConnectionHost = () => ({})
@@ -22,12 +22,12 @@ const resetOnboarding = () => ({})
 
 storiesOf('Containers.Onboarding.Forms', module)
   .add('ConnectionType', () => (
-    <ConnectionType stopLnd={stopLnd} resetOnboarding={resetOnboarding} />
+    <ConnectionType resetOnboarding={resetOnboarding} stopLnd={stopLnd} />
   ))
   .add('ConnectionDetails', () => (
     <ConnectionDetails
-      setConnectionHost={setConnectionHost}
       setConnectionCert={setConnectionCert}
+      setConnectionHost={setConnectionHost}
       setConnectionMacaroon={setConnectionMacaroon}
     />
   ))
@@ -64,7 +64,7 @@ storiesOf('Containers.Onboarding.Forms', module)
         'slender',
         'blue',
         'day',
-        'fix'
+        'fix',
       ]}
     />
   ))
@@ -94,7 +94,7 @@ storiesOf('Containers.Onboarding.Forms', module)
         'slender',
         'blue',
         'day',
-        'fix'
+        'fix',
       ]}
     />
   ))
diff --git a/stories/containers/pay.stories.js b/stories/containers/pay.stories.js
index e2343dc6f0e..4ee935d417c 100644
--- a/stories/containers/pay.stories.js
+++ b/stories/containers/pay.stories.js
@@ -19,24 +19,24 @@ const data = {
   onchainFees: {
     fastestFee: 100,
     halfHourFee: 70,
-    hourFee: 30
+    hourFee: 30,
   },
 
   nodes: [
     {
       pub_key: '03c856d2dbec7454c48f311031f06bb99e3ca1ab15a9b9b35de14e139aa663b463',
-      alias: 'htlc.me'
-    }
+      alias: 'htlc.me',
+    },
   ],
   routes: [],
 
   currentTicker: {
     USD: 6477.78,
     EUR: 5656.01,
-    GBP: 5052.73
+    GBP: 5052.73,
   },
 
-  isProcessing: false
+  isProcessing: false,
 }
 
 const mockPayInvoice = async () => {
@@ -68,7 +68,7 @@ storiesOf('Containers.Pay', module)
         'Bitcoin mainnet': 'bitcoin',
         'Bitcoin testnet': 'testnet',
         'Litecoin mainnet': 'litecoin',
-        'Litecoin testnet': 'litecoin_testnet'
+        'Litecoin testnet': 'litecoin_testnet',
       },
       'bitcoin'
     )
@@ -76,7 +76,7 @@ storiesOf('Containers.Pay', module)
       'Unit',
       {
         Satoshis: 'satoshis',
-        Millisatoshis: 'millisatoshis'
+        Millisatoshis: 'millisatoshis',
       },
       'satoshis'
     )
@@ -91,24 +91,24 @@ storiesOf('Containers.Pay', module)
 
     return (
       <Pay
-        width={9 / 16}
-        mx="auto"
-        // State
-        // initialPayReq="lntb100n1pdaetlfpp5rkj5acj5usdlqekv3548nx5zc58tsqghm8qy6pdkrn3h37ep5aqsdqqcqzysxqyz5vq7vsxfsnak9yd0rf0zxpg9tukykxjqwef72apfwq2meg7wlz8zg0nxh3fmmc0ayv8ac5xhnlwlxajatqwnh3qwdx6uruyqn47enq9w6qplzqccc"
-        isProcessing={data.isProcessing}
         chain={chain}
-        network={network}
         channelBalance={data.channelBalance}
+        // State
+        // initialPayReq="lntb100n1pdaetlfpp5rkj5acj5usdlqekv3548nx5zc58tsqghm8qy6pdkrn3h37ep5aqsdqqcqzysxqyz5vq7vsxfsnak9yd0rf0zxpg9tukykxjqwef72apfwq2meg7wlz8zg0nxh3fmmc0ayv8ac5xhnlwlxajatqwnh3qwdx6uruyqn47enq9w6qplzqccc"
         cryptoCurrency={state.ticker.currency}
         cryptoCurrencyTicker={tickerSelectors.currencyName(state)}
         cryptoName={data.cryptoName}
-        walletBalance={data.walletBalance}
+        isProcessing={data.isProcessing}
+        mx="auto"
+        network={network}
+        payInvoice={mockPayInvoice}
         payReq={payReq}
+        queryRoutes={mockQueryRoutes}
         // Dispatch
-        payInvoice={mockPayInvoice}
         sendCoins={mockSendCoins}
-        queryRoutes={mockQueryRoutes}
         setPayReq={mockSetPayReq}
+        walletBalance={data.walletBalance}
+        width={9 / 16}
       />
     )
   })
diff --git a/stories/containers/pay/pay.component.stories.js b/stories/containers/pay/pay.component.stories.js
index c34b4a27668..6e2a9fda7cc 100644
--- a/stories/containers/pay/pay.component.stories.js
+++ b/stories/containers/pay/pay.component.stories.js
@@ -17,24 +17,24 @@ const data = {
   onchainFees: {
     fastestFee: 100,
     halfHourFee: 70,
-    hourFee: 30
+    hourFee: 30,
   },
 
   nodes: [
     {
       pub_key: '03c856d2dbec7454c48f311031f06bb99e3ca1ab15a9b9b35de14e139aa663b463',
-      alias: 'htlc.me'
-    }
+      alias: 'htlc.me',
+    },
   ],
   routes: [],
 
   currentTicker: {
     USD: 6477.78,
     EUR: 5656.01,
-    GBP: 5052.73
+    GBP: 5052.73,
   },
 
-  isProcessing: false
+  isProcessing: false,
 }
 
 const mockQueryFees = async () => {
@@ -49,19 +49,19 @@ storiesOf('Containers.Pay', module)
         sections: [
           {
             title: 'On-chain',
-            sectionFn: () => <PayHeader title="Send Bitcoin" type="onchain" />
+            sectionFn: () => <PayHeader title="Send Bitcoin" type="onchain" />,
           },
           {
             title: 'Off-chain',
-            sectionFn: () => <PayHeader title="Send Bitcoin" type="offchain" />
+            sectionFn: () => <PayHeader title="Send Bitcoin" type="offchain" />,
           },
           {
             title: 'Generic',
-            sectionFn: () => <PayHeader title="Send Bitcoin" />
-          }
-        ]
-      }
-    ]
+            sectionFn: () => <PayHeader title="Send Bitcoin" />,
+          },
+        ],
+      },
+    ],
   })
   .addWithChapters('PaySummary', {
     chapters: [
@@ -76,8 +76,8 @@ storiesOf('Containers.Pay', module)
                   // State
                   cryptoCurrency={state.ticker.currency}
                   cryptoCurrencyTicker={tickerSelectors.currencyName(state)}
-                  minFee={12}
                   maxFee={18}
+                  minFee={12}
                   nodes={data.nodes}
                   payReq={text(
                     'Payment Request',
@@ -85,7 +85,7 @@ storiesOf('Containers.Pay', module)
                   )}
                 />
               )
-            }
+            },
           },
           {
             title: 'PaySummaryOnChain',
@@ -104,11 +104,11 @@ storiesOf('Containers.Pay', module)
                   queryFees={mockQueryFees}
                 />
               )
-            }
-          }
-        ]
-      }
-    ]
+            },
+          },
+        ],
+      },
+    ],
   })
   .addWithChapters('PayButtons', {
     chapters: [
@@ -116,17 +116,17 @@ storiesOf('Containers.Pay', module)
         sections: [
           {
             title: 'Default',
-            sectionFn: () => <PayButtons previousStep={action('clicked')} />
+            sectionFn: () => <PayButtons previousStep={action('clicked')} />,
           },
           {
             title: 'Disabled',
-            sectionFn: () => <PayButtons previousStep={action('clicked')} disabled />
+            sectionFn: () => <PayButtons disabled previousStep={action('clicked')} />,
           },
           {
             title: 'Processing',
-            sectionFn: () => <PayButtons previousStep={action('clicked')} processing />
-          }
-        ]
-      }
-    ]
+            sectionFn: () => <PayButtons previousStep={action('clicked')} processing />,
+          },
+        ],
+      },
+    ],
   })
diff --git a/stories/containers/request.stories.js b/stories/containers/request.stories.js
index 1db79aa7afa..3a41f020936 100644
--- a/stories/containers/request.stories.js
+++ b/stories/containers/request.stories.js
@@ -20,21 +20,21 @@ const mockCreateInvoice = async (amount, currency, memo = '') => {
     tags: [
       {
         tagName: 'purpose_commit_hash',
-        data: '3925b6f67e2c340036ed12093dd44e0368df1b6ea26c53dbe4811f58fd5db8c1'
+        data: '3925b6f67e2c340036ed12093dd44e0368df1b6ea26c53dbe4811f58fd5db8c1',
       },
       {
         tagName: 'payment_hash',
-        data: '0001020304050607080900010203040506070809000102030405060708090102'
+        data: '0001020304050607080900010203040506070809000102030405060708090102',
       },
       {
         tagName: 'expire_time',
-        data: 30
+        data: 30,
       },
       {
         tagName: 'description',
-        data: memo
-      }
-    ]
+        data: memo,
+      },
+    ],
   })
   var privateKeyHex = 'e126f68f7eafcc8b74f54d269fe206be715000f94dac067d1c04a8ca3b2db734'
   var signed = lightningPayReq.sign(encoded, privateKeyHex)
@@ -55,17 +55,17 @@ storiesOf('Containers.Request', module)
     const state = store.getState()
     return (
       <Request
-        width={9 / 16}
-        mx="auto"
-        // State
+        createInvoice={mockCreateInvoice}
         cryptoCurrency={state.ticker.currency}
+        // State
         cryptoCurrencyTicker={tickerSelectors.currencyName(state)}
         cryptoName={tickerSelectors.cryptoName(state)}
         invoice={mockCreateInvoice()}
+        mx="auto"
         payReq={payReq}
         // Dispatch
-        createInvoice={mockCreateInvoice}
         showNotification={action('showNotification')}
+        width={9 / 16}
       />
     )
   })
diff --git a/stories/containers/request/request.component.stories.js b/stories/containers/request/request.component.stories.js
index dd4b0e202ec..95af2821abe 100644
--- a/stories/containers/request/request.component.stories.js
+++ b/stories/containers/request/request.component.stories.js
@@ -17,21 +17,21 @@ const mockCreateInvoice = async (amount, currency, memo = '') => {
     tags: [
       {
         tagName: 'purpose_commit_hash',
-        data: '3925b6f67e2c340036ed12093dd44e0368df1b6ea26c53dbe4811f58fd5db8c1'
+        data: '3925b6f67e2c340036ed12093dd44e0368df1b6ea26c53dbe4811f58fd5db8c1',
       },
       {
         tagName: 'payment_hash',
-        data: '0001020304050607080900010203040506070809000102030405060708090102'
+        data: '0001020304050607080900010203040506070809000102030405060708090102',
       },
       {
         tagName: 'expire_time',
-        data: 30
+        data: 30,
       },
       {
         tagName: 'description',
-        data: memo
-      }
-    ]
+        data: memo,
+      },
+    ],
   })
   var privateKeyHex = 'e126f68f7eafcc8b74f54d269fe206be715000f94dac067d1c04a8ca3b2db734'
   var signed = lightningPayReq.sign(encoded, privateKeyHex)
diff --git a/stories/containers/syncing.stories.js b/stories/containers/syncing.stories.js
index da694439867..7983cd60a91 100644
--- a/stories/containers/syncing.stories.js
+++ b/stories/containers/syncing.stories.js
@@ -12,7 +12,7 @@ const store = new Store({
   blockHeight: 123123,
   lndBlockHeight: 1000,
   lndCfilterHeight: 100,
-  isLoading: false
+  isLoading: false,
 })
 
 const setIsWalletOpen = () => ({})
@@ -22,7 +22,7 @@ storiesOf('Containers.Syncing', module)
   .addParameters({ info: { disable: true } })
   .addDecorator(story => <Window>{story()}</Window>)
   .addDecorator(story => (
-    <Modal withHeader onClose={linkTo('Containers.Home', 'Home')} pb={0} px={0}>
+    <Modal onClose={linkTo('Containers.Home', 'Home')} pb={0} px={0} withHeader>
       {story()}
     </Modal>
   ))
@@ -35,17 +35,17 @@ storiesOf('Containers.Syncing', module)
         {state => (
           <Syncing
             // State
-            hasSynced={hasSynced}
-            syncPercentage={syncPercentage}
-            syncStatus={syncStatus}
             address={state.address}
             blockHeight={state.blockHeight}
+            hasSynced={hasSynced}
+            isLoading={state.isLoading}
             lndBlockHeight={state.lndBlockHeight}
             lndCfilterHeight={state.lndCfilterHeight}
-            isLoading={state.isLoading}
-            // Dispatch
             setIsWalletOpen={setIsWalletOpen}
             showNotification={showNotification}
+            // Dispatch
+            syncPercentage={syncPercentage}
+            syncStatus={syncStatus}
           />
         )}
       </State>
diff --git a/stories/forms/form.stories.js b/stories/forms/form.stories.js
index 619b4de02d1..045a88ad3f6 100644
--- a/stories/forms/form.stories.js
+++ b/stories/forms/form.stories.js
@@ -20,7 +20,7 @@ import {
   Range,
   Select,
   TextArea,
-  Toggle
+  Toggle,
 } from 'components/UI'
 
 const validate = value => {
@@ -33,7 +33,7 @@ const selectItems = [
   { value: 'Pear', key: 'pear' },
   { value: 'Orange', key: 'orange' },
   { value: 'Grape', key: 'grape' },
-  { value: 'Banana', key: 'banana' }
+  { value: 'Banana', key: 'banana' },
 ]
 
 storiesOf('Forms', module)
@@ -47,38 +47,38 @@ storiesOf('Forms', module)
       </Form>
       <Form mb={4}>
         <Input
+          description="This field also has a description."
           field="fieldName"
           id="field-name"
           label="Field with Label and description"
-          description="This field also has a description."
         />
       </Form>
       <Form mb={4}>
         <Input
           field="fieldName"
           id="field-name"
+          isRequired
           label="Required field"
-          required
           validateOnBlur
           validateOnChange
         />
       </Form>
       <Form mb={4}>
-        <Input field="fieldName" id="field-name" type="search" label="Search field" />
+        <Input field="fieldName" id="field-name" label="Search field" type="search" />
       </Form>
       <Form mb={4}>
-        <Input field="fieldName" id="field-name" type="password" label="Password field" />
+        <Input field="fieldName" id="field-name" label="Password field" type="password" />
       </Form>
       <Form mb={4}>
-        <Input field="fieldName" id="field-name" label="Disabled field" disabled />
+        <Input field="fieldName" id="field-name" isDisabled label="Disabled field" />
       </Form>
       <Form mb={4}>
         <Input
           field="fieldName"
           id="field-name"
-          label="Read only field"
-          readOnly
           initialValue="This is a read only field"
+          isReadOnly
+          label="Read only field"
         />
       </Form>
     </>
@@ -93,32 +93,32 @@ storiesOf('Forms', module)
       </Form>
       <Form mb={4}>
         <TextArea
+          description="This field also has a description."
           field="fieldName"
           id="field-name"
           label="TextArea with Label and description"
-          description="This field also has a description."
         />
       </Form>
       <Form mb={4}>
         <TextArea
           field="fieldName"
           id="field-name"
+          isRequired
           label="Required field"
-          required
           validateOnBlur
           validateOnChange
         />
       </Form>
       <Form mb={4}>
-        <TextArea field="fieldName" id="field-name" label="Disabled field" disabled />
+        <TextArea field="fieldName" id="field-name" isDisabled label="Disabled field" />
       </Form>
       <Form mb={4}>
         <TextArea
           field="fieldName"
           id="field-name"
-          label="Read only field"
-          readOnly
           initialValue="This is a read only field"
+          isReadOnly
+          label="Read only field"
         />
       </Form>
     </>
@@ -131,22 +131,22 @@ storiesOf('Forms', module)
   .add('CryptoAmountInput', () => (
     <Form>
       <Box my={4}>
-        <CryptoAmountInput field="cryptoBtc" currency="btc" width={150} label="BTC" />
+        <CryptoAmountInput currency="btc" field="cryptoBtc" label="BTC" width={150} />
       </Box>
 
       <Box my={4}>
-        <CryptoAmountInput field="cryptoBits" currency="bits" width={150} label="Bits" />
+        <CryptoAmountInput currency="bits" field="cryptoBits" label="Bits" width={150} />
       </Box>
 
       <Box my={4}>
-        <CryptoAmountInput field="cryptoSats" currency="sats" width={150} label="Sats" />
+        <CryptoAmountInput currency="sats" field="cryptoSats" label="Sats" width={150} />
       </Box>
     </Form>
   ))
   .add('FiatAmountInput', () => (
     <Form>
       <Box my={4}>
-        <FiatAmountInput field="fiat" currency="usd" width={150} label="USD" />
+        <FiatAmountInput currency="usd" field="fiat" label="USD" width={150} />
       </Box>
     </Form>
   ))
@@ -156,10 +156,10 @@ storiesOf('Forms', module)
         <Form id="testnet">
           <LightningInvoiceInput
             chain="bitcoin"
-            network="testnet"
             field="testnet"
             id="testnet"
             label="Bitcoin or Lightning address (testnet)"
+            network="testnet"
             validateOnBlur
             validateOnChange
           />
@@ -169,10 +169,10 @@ storiesOf('Forms', module)
         <Form id="testnet">
           <LightningInvoiceInput
             chain="bitcoin"
-            network="mainnet"
             field="mainnet"
             id="mainnet"
             label="Bitcoin or Lightning address (mainnet)"
+            network="mainnet"
             validateOnBlur
             validateOnChange
           />
@@ -212,9 +212,9 @@ storiesOf('Forms', module)
   .add('Radio', () => (
     <Form>
       <RadioGroup field="radio">
-        <Radio value="item1" label="Item 1" description="Radio buttons" mb={3} />
-        <Radio value="item2" label="Item 2" description="can have an optional title" mb={3} />
-        <Radio value="item3" label="Item 3" description="and description" mb={3} />
+        <Radio description="Radio buttons" label="Item 1" mb={3} value="item1" />
+        <Radio description="can have an optional title" label="Item 2" mb={3} value="item2" />
+        <Radio description="and description" label="Item 3" mb={3} value="item3" />
       </RadioGroup>
     </Form>
   ))
@@ -225,46 +225,40 @@ storiesOf('Forms', module)
   ))
   .add('Range', () => (
     <Form>
-      <Range initialValue={25} field="range" />
+      <Range field="range" initialValue={25} />
     </Form>
   ))
   .add('Checkbox', () => (
     <Form>
-      <Label htmlFor="id">Unchecked</Label>
-      <Checkbox
-        label="I agree that Zap is the best lightning wallet"
-        field="checkbox"
-        description="Lightning is a layer 2 scaling solution"
-      />
-      <Label htmlFor="id" mt={4}>
+      <Label htmlFor="checkbox">Unchecked</Label>
+      <Checkbox description="Lightning is a layer 2 scaling solution" field="checkbox" />
+      <Label htmlFor="checkbox2" mt={4}>
         Checked
       </Label>
       <Checkbox
-        label="I agree that Zap is the best lightning wallet"
         field="checkbox2"
+        isChecked
+        label="I agree that Zap is the best lightning wallet"
         mt={2}
-        checked
       />
-      <Label htmlFor="id" mt={4}>
+      <Label htmlFor="checkbox3" mt={4}>
         Disabled
       </Label>
       <Checkbox
+        field="checkbox3"
+        isChecked
+        isDisabled
         label="I agree that Zap is the best lightning wallet"
-        field="checkbox2"
         mt={2}
-        checked
-        disabled
       />
-      <Label htmlFor="id" mt={4}>
+      <Label htmlFor="checkbox4" mt={4}>
         With description
       </Label>
       <Checkbox
-        label="I agree that Zap is the best lightning wallet"
         description="Lightning is a layer 2 scaling solution"
-        field="checkbox3"
+        field="checkbox4"
+        label="I agree that Zap is the best lightning wallet"
         mt={2}
-        checked
-        disabled
       />
     </Form>
   ))
@@ -289,8 +283,8 @@ storiesOf('Forms', module)
               <Box my={4}>
                 <TextArea
                   field="textarea1"
-                  placeholder="Type here"
                   label="Example TextArea"
+                  placeholder="Type here"
                   validate={validate}
                   validateOnBlur
                   validateOnChange
@@ -300,10 +294,10 @@ storiesOf('Forms', module)
               <Box my={4}>
                 <LightningInvoiceInput
                   chain="bitcoin"
-                  network="testnet"
                   field="testnet"
                   id="testnet"
                   label="Bitcoin or Lightning address (testnet)"
+                  network="testnet"
                   validateOnBlur
                   validateOnChange
                 />
@@ -311,10 +305,10 @@ storiesOf('Forms', module)
               <Box>
                 <LightningInvoiceInput
                   chain="bitcoin"
-                  network="mainnet"
                   field="mainnet"
                   id="mainnet"
                   label="Bitcoin or Lightning address (mainnet)"
+                  network="mainnet"
                   validateOnBlur
                   validateOnChange
                 />
@@ -349,14 +343,14 @@ storiesOf('Forms', module)
 
               <Box my={4}>
                 <RadioGroup field="radio">
-                  <Radio value="item1" label="Item 1" description="Radio buttons" mb={3} />
+                  <Radio description="Radio buttons" label="Item 1" mb={3} value="item1" />
                   <Radio
-                    value="item2"
-                    label="Item 2"
                     description="can have an optional title"
+                    label="Item 2"
                     mb={3}
+                    value="item2"
                   />
-                  <Radio value="item3" label="Item 3" description="and description" mb={3} />
+                  <Radio description="and description" label="Item 3" mb={3} value="item3" />
                 </RadioGroup>
               </Box>
 
@@ -367,7 +361,7 @@ storiesOf('Forms', module)
                   </Label>
                 </Box>
                 <Box>
-                  <Toggle field="checkbox1" onChange={action('change')} label="Example Toggle" />
+                  <Toggle field="checkbox1" label="Example Toggle" onChange={action('change')} />
                 </Box>
               </Box>
 
@@ -390,8 +384,8 @@ storiesOf('Forms', module)
                 </Box>
                 <Box>
                   <Checkbox
-                    label="I agree that Zap is the best lightning wallet"
                     field="checkbox2"
+                    label="I agree that Zap is the best lightning wallet"
                   />
                 </Box>
               </Box>
diff --git a/stories/helpers.js b/stories/helpers.js
index a1ddd573c2b..59f53bd8a4e 100644
--- a/stories/helpers.js
+++ b/stories/helpers.js
@@ -5,29 +5,29 @@ import { Bar, Heading, Page } from 'components/UI'
 import lightningPayReq from 'bolt11'
 
 export const Window = props => <Page css={{ height: 'calc(100vh - 40px)' }} {...props} />
-export const Column = props => <Box width={1 / 2} mr={5} {...props} />
-export const Group = ({ title, children, withBar = true }) => (
+export const Column = props => <Box mr={5} width={1 / 2} {...props} />
+export const Group = ({ title, children, hasBar = true }) => (
   <Box mb={4}>
-    <Heading.h3 mb={2} fontWeight="normal">
+    <Heading.h3 fontWeight="normal" mb={2}>
       {title}
     </Heading.h3>
-    {withBar && <Bar mb={3} />}
+    {hasBar && <Bar mb={3} />}
     {children}
   </Box>
 )
 Group.propTypes = {
-  title: PropTypes.string,
   children: PropTypes.node,
-  withBar: PropTypes.bool
+  hasBar: PropTypes.bool,
+  title: PropTypes.string,
 }
 export const Element = props => <Box py={1} {...props} />
 export const Content = ({ children }) => (
-  <Flex justifyContent="center" alignItems="center" css={{ height: '100%' }}>
+  <Flex alignItems="center" css={{ height: '100%' }} justifyContent="center">
     <Heading>{children}</Heading>
   </Flex>
 )
 Content.propTypes = {
-  children: PropTypes.node
+  children: PropTypes.node,
 }
 
 export const mockCreateInvoice = (coinType, amount, unit = 'satoshis', memo = '') => {
@@ -36,21 +36,21 @@ export const mockCreateInvoice = (coinType, amount, unit = 'satoshis', memo = ''
     tags: [
       {
         tagName: 'purpose_commit_hash',
-        data: '3925b6f67e2c340036ed12093dd44e0368df1b6ea26c53dbe4811f58fd5db8c1'
+        data: '3925b6f67e2c340036ed12093dd44e0368df1b6ea26c53dbe4811f58fd5db8c1',
       },
       {
         tagName: 'payment_hash',
-        data: '0001020304050607080900010203040506070809000102030405060708090102'
+        data: '0001020304050607080900010203040506070809000102030405060708090102',
       },
       {
         tagName: 'expire_time',
-        data: 30
+        data: 30,
       },
       {
         tagName: 'description',
-        data: memo
-      }
-    ]
+        data: memo,
+      },
+    ],
   }
   data[unit] = amount
 
diff --git a/stories/icons/icon.stories.js b/stories/icons/icon.stories.js
index d59211d2a55..708061a886a 100644
--- a/stories/icons/icon.stories.js
+++ b/stories/icons/icon.stories.js
@@ -109,7 +109,7 @@ const zapIconsList = {
   Warning,
   X,
   Zap,
-  ZapLogo
+  ZapLogo,
 }
 
 const zapIconStories = storiesOf('Icons', module)
@@ -123,7 +123,7 @@ Object.keys(zapIconsList).forEach(name => {
           <Box mr={2}>
             {size} x {size}:
           </Box>
-          <Icon width={size} height={size} />
+          <Icon height={size} width={size} />
         </Flex>
       ))}
     </React.Fragment>
diff --git a/stories/layouts/page.stories.js b/stories/layouts/page.stories.js
index 1d5b82326d6..2b6e5504ba2 100644
--- a/stories/layouts/page.stories.js
+++ b/stories/layouts/page.stories.js
@@ -21,7 +21,7 @@ storiesOf('Layouts', module).addWithChapters('Page', {
                 <Content>MainContent</Content>
               </MainContent>
             </Page>
-          )
+          ),
         },
         {
           title: 'Page with large right sidebar',
@@ -34,9 +34,9 @@ storiesOf('Layouts', module).addWithChapters('Page', {
                 <Content>Sidebar</Content>
               </Sidebar.large>
             </Page>
-          )
-        }
-      ]
-    }
-  ]
+          ),
+        },
+      ],
+    },
+  ],
 })
diff --git a/stories/layouts/panel.stories.js b/stories/layouts/panel.stories.js
index 4c9eac85564..8a0533d7353 100644
--- a/stories/layouts/panel.stories.js
+++ b/stories/layouts/panel.stories.js
@@ -8,7 +8,7 @@ const Wrapper = ({ children }) => (
   <Page css={{ height: '500px', 'min-height': '500px' }}>{children}</Page>
 )
 Wrapper.propTypes = {
-  children: PropTypes.node
+  children: PropTypes.node,
 }
 
 storiesOf('Layouts', module).addWithChapters('Panel', {
@@ -32,9 +32,9 @@ storiesOf('Layouts', module).addWithChapters('Panel', {
                 </Panel.Footer>
               </Panel>
             </Wrapper>
-          )
-        }
-      ]
-    }
-  ]
+          ),
+        },
+      ],
+    },
+  ],
 })
diff --git a/test/e2e/onboarding-connect-btcpay.spec.js b/test/e2e/onboarding-connect-btcpay.spec.js
index 08c81af63e4..b1013a6384c 100644
--- a/test/e2e/onboarding-connect-btcpay.spec.js
+++ b/test/e2e/onboarding-connect-btcpay.spec.js
@@ -4,7 +4,7 @@ import {
   getUserDataDir,
   assertNoConsoleErrors,
   cleanTestEnvironment,
-  cleanElectronEnvironment
+  cleanElectronEnvironment,
 } from './utils/helpers'
 import Onboarding from './pages/onboarding'
 import Loading from './pages/loading'
diff --git a/test/e2e/onboarding-connect-manual.spec.js b/test/e2e/onboarding-connect-manual.spec.js
index a0c2bba43d9..1dfb3345ed5 100644
--- a/test/e2e/onboarding-connect-manual.spec.js
+++ b/test/e2e/onboarding-connect-manual.spec.js
@@ -5,7 +5,7 @@ import {
   getUserDataDir,
   assertNoConsoleErrors,
   cleanTestEnvironment,
-  cleanElectronEnvironment
+  cleanElectronEnvironment,
 } from './utils/helpers'
 import Onboarding from './pages/onboarding'
 import Loading from './pages/loading'
diff --git a/test/e2e/onboarding-create.spec.js b/test/e2e/onboarding-create.spec.js
index 8d4d74f6e5f..1d7737f90d9 100644
--- a/test/e2e/onboarding-create.spec.js
+++ b/test/e2e/onboarding-create.spec.js
@@ -4,7 +4,7 @@ import {
   getUserDataDir,
   assertNoConsoleErrors,
   cleanTestEnvironment,
-  cleanElectronEnvironment
+  cleanElectronEnvironment,
 } from './utils/helpers'
 import Onboarding from './pages/onboarding'
 import Syncing from './pages/syncing'
@@ -36,7 +36,7 @@ test('should create a new wallet', async t => {
     .click(onboarding.nextButton)
 
     // Wait for SeedView to generate seed and then submit the form.
-    .expect(onboarding.seedView.withProps({ fetchingSeed: false }).exists)
+    .expect(onboarding.seedView.withProps({ isFetchingSeed: false }).exists)
     .ok()
     .expect(onboarding.nextButton.hasAttribute('disabled'))
     .notOk('ready to be clicked')
diff --git a/test/e2e/onboarding-import.spec.js b/test/e2e/onboarding-import.spec.js
index 020a91aeded..41d8201bd7e 100644
--- a/test/e2e/onboarding-import.spec.js
+++ b/test/e2e/onboarding-import.spec.js
@@ -4,7 +4,7 @@ import {
   getUserDataDir,
   assertNoConsoleErrors,
   cleanTestEnvironment,
-  cleanElectronEnvironment
+  cleanElectronEnvironment,
 } from './utils/helpers'
 import Onboarding from './pages/onboarding'
 
@@ -49,7 +49,7 @@ test('should import a wallet from an existing seed', async t => {
     'slender',
     'blue',
     'day',
-    'fix'
+    'fix',
   ]
 
   await t
diff --git a/test/e2e/pages/onboarding.js b/test/e2e/pages/onboarding.js
index a780d28f8c9..79a9f319729 100644
--- a/test/e2e/pages/onboarding.js
+++ b/test/e2e/pages/onboarding.js
@@ -52,12 +52,12 @@ class Onboarding {
     create: new ConnectionTypeOption('create'),
     import: new ConnectionTypeOption('import'),
     custom: new ConnectionTypeOption('custom'),
-    btcpayserver: new ConnectionTypeOption('btcpayserver')
+    btcpayserver: new ConnectionTypeOption('btcpayserver'),
   }
 
   connectionDetailsTabs = {
     string: new ConnectionDetailsTab('FORM_TYPE_CONNECTION_STRING'),
-    manual: new ConnectionDetailsTab('FORM_TYPE_MANUAL')
+    manual: new ConnectionDetailsTab('FORM_TYPE_MANUAL'),
   }
 
   // Inputs
diff --git a/test/unit/__helpers__/intl-enzyme-test-helper.js b/test/unit/__helpers__/intl-enzyme-test-helper.js
index 15135ad1ff7..1d5b23b59fb 100644
--- a/test/unit/__helpers__/intl-enzyme-test-helper.js
+++ b/test/unit/__helpers__/intl-enzyme-test-helper.js
@@ -28,7 +28,7 @@ function nodeWithIntlProp(node) {
 export function shallowWithIntl(node, { context, ...additionalOptions } = {}) {
   return shallow(nodeWithIntlProp(node), {
     context: Object.assign({}, context, { intl }),
-    ...additionalOptions
+    ...additionalOptions,
   })
 }
 
@@ -36,6 +36,6 @@ export function mountWithIntl(node, { context, childContextTypes, ...additionalO
   return mount(nodeWithIntlProp(node), {
     context: Object.assign({}, context, { intl }),
     childContextTypes: Object.assign({}, { intl: intlShape }, childContextTypes),
-    ...additionalOptions
+    ...additionalOptions,
   })
 }
diff --git a/test/unit/__mocks__/electron.js b/test/unit/__mocks__/electron.js
index b8a42527f66..de53a477725 100644
--- a/test/unit/__mocks__/electron.js
+++ b/test/unit/__mocks__/electron.js
@@ -6,16 +6,16 @@ module.exports = {
   app: {
     getPath: name => normalize(`/tmp/zap-test/${name}`),
     getAppPath: () => normalize(`${__dirname}/../../`),
-    getLocale: jest.fn()
+    getLocale: jest.fn(),
   },
   remote: {
     app: {
-      getLocale: jest.fn()
-    }
+      getLocale: jest.fn(),
+    },
   },
   dialog: jest.fn(),
   BrowserWindow: jest.fn(),
   ipcMain: {
-    on: jest.fn()
-  }
+    on: jest.fn(),
+  },
 }
diff --git a/test/unit/components/Home/WalletHeader.spec.js b/test/unit/components/Home/WalletHeader.spec.js
index 09ebc710772..771bb24032b 100644
--- a/test/unit/components/Home/WalletHeader.spec.js
+++ b/test/unit/components/Home/WalletHeader.spec.js
@@ -9,7 +9,7 @@ describe('component.WalletHeader', () => {
       type: 'local',
       id: 1,
       host: 'local.host',
-      name: 'Wallet name'
+      name: 'Wallet name',
     }
     const wrapper = shallow(<WalletHeader wallet={wallet} />)
     expect(toJSON(wrapper)).toMatchSnapshot()
diff --git a/test/unit/components/Home/__snapshots__/CreateWalletButton.spec.js.snap b/test/unit/components/Home/__snapshots__/CreateWalletButton.spec.js.snap
index af87717dde9..37a4f4a4046 100644
--- a/test/unit/components/Home/__snapshots__/CreateWalletButton.spec.js.snap
+++ b/test/unit/components/Home/__snapshots__/CreateWalletButton.spec.js.snap
@@ -2,9 +2,10 @@
 
 exports[`component.CreateWalletButton should render correctly 1`] = `
 <Button
-  active={false}
+  isActive={false}
+  isDisabled={false}
+  isProcessing={false}
   onClick={[Function]}
-  processing={false}
   size="small"
   variant="secondary"
 >
diff --git a/test/unit/components/Pay/PaySummaryLightning.spec.js b/test/unit/components/Pay/PaySummaryLightning.spec.js
index 03b9e4d1212..6682090e053 100644
--- a/test/unit/components/Pay/PaySummaryLightning.spec.js
+++ b/test/unit/components/Pay/PaySummaryLightning.spec.js
@@ -7,29 +7,29 @@ const props = {
   currentTicker: {
     USD: 6477.78,
     EUR: 5656.01,
-    GBP: 5052.73
+    GBP: 5052.73,
   },
   cryptoCurrency: 'btc',
   cryptoCurrencyTicker: 'BTC',
   cryptoCurrencies: [
     {
       key: 'btc',
-      name: 'BTC'
+      name: 'BTC',
     },
     {
       key: 'bits',
-      name: 'bits'
+      name: 'bits',
     },
     {
       key: 'sats',
-      name: 'satoshis'
-    }
+      name: 'satoshis',
+    },
   ],
   fiatCurrency: 'USD',
   /* eslint-disable max-len */
   payReq:
     'lntb100u1pdaxza7pp5x73t3j7xgvkzgcdvzgpdg74k4pn0uhwuxlxu9qssytjn77x7zs4qdqqcqzysxqyz5vqd20eaq5uferzgzwasu5te3pla7gv8tzk8gcdxlj7lpkygvfdwndhwtl3ezn9ltjejl3hsp36ps3z3e5pp4rzp2hgqjqql80ec3hyzucq4d9axl',
-  setCryptoCurrency: jest.fn()
+  setCryptoCurrency: jest.fn(),
 }
 describe('component.Form.PaySummaryLightning', () => {
   it('should render correctly', () => {
diff --git a/test/unit/components/Pay/PaySummaryOnchain.spec.js b/test/unit/components/Pay/PaySummaryOnchain.spec.js
index 433997a8bec..396ce3e1661 100644
--- a/test/unit/components/Pay/PaySummaryOnchain.spec.js
+++ b/test/unit/components/Pay/PaySummaryOnchain.spec.js
@@ -9,27 +9,27 @@ const props = {
   currentTicker: {
     USD: 6477.78,
     EUR: 5656.01,
-    GBP: 5052.73
+    GBP: 5052.73,
   },
   cryptoCurrency: 'btc',
   cryptoCurrencyTicker: 'BTC',
   cryptoCurrencies: [
     {
       key: 'btc',
-      name: 'BTC'
+      name: 'BTC',
     },
     {
       key: 'bits',
-      name: 'bits'
+      name: 'bits',
     },
     {
       key: 'sats',
-      name: 'satoshis'
-    }
+      name: 'satoshis',
+    },
   ],
   fiatCurrency: 'USD',
   queryFees: jest.fn(),
-  setCryptoCurrency: jest.fn()
+  setCryptoCurrency: jest.fn(),
 }
 
 describe('component.Form.PaySummaryOnchain', () => {
diff --git a/test/unit/components/Pay/__snapshots__/PayButtons.spec.js.snap b/test/unit/components/Pay/__snapshots__/PayButtons.spec.js.snap
index 1c99f107e3a..47babfa647d 100644
--- a/test/unit/components/Pay/__snapshots__/PayButtons.spec.js.snap
+++ b/test/unit/components/Pay/__snapshots__/PayButtons.spec.js.snap
@@ -9,10 +9,10 @@ exports[`component.Form.PayButtons should render correctly with default props 1`
     width={0.2}
   >
     <Button
-      active={false}
-      disabled={false}
+      isActive={false}
+      isDisabled={false}
+      isProcessing={false}
       onClick={[Function]}
-      processing={false}
       px={0}
       size="medium"
       type="button"
@@ -35,10 +35,10 @@ exports[`component.Form.PayButtons should render correctly with default props 1`
     </Button>
   </styled.div>
   <Button
-    active={false}
-    disabled={false}
+    isActive={false}
+    isDisabled={false}
+    isProcessing={false}
     mx="auto"
-    processing={false}
     size="medium"
     type="submit"
     variant="normal"
diff --git a/test/unit/components/UI/Checkbox.spec.js b/test/unit/components/UI/Checkbox.spec.js
index 611462e1726..58ea0a94c09 100644
--- a/test/unit/components/UI/Checkbox.spec.js
+++ b/test/unit/components/UI/Checkbox.spec.js
@@ -12,7 +12,7 @@ describe('component.UI.Checkbox', () => {
         <ThemeProvider theme={dark}>
           <Form>
             <Checkbox field="name" label="cb" />
-            <Checkbox field="name2" label="cb" description="desc" />
+            <Checkbox description="desc" field="name2" label="cb" />
           </Form>
         </ThemeProvider>
       )
diff --git a/test/unit/components/UI/Dialog.spec.js b/test/unit/components/UI/Dialog.spec.js
index aa96ffdeabe..7a3b3873e9c 100644
--- a/test/unit/components/UI/Dialog.spec.js
+++ b/test/unit/components/UI/Dialog.spec.js
@@ -9,9 +9,9 @@ describe('component.UI.Dialog', () => {
   it('should render correctly with two buttons', () => {
     const wrapper = shallow(
       <Dialog
+        buttons={[{ name: 'Delete', onClick: () => {} }, { name: 'Cancel', onClick: () => {} }]}
         header="Title"
         onClose={() => {}}
-        buttons={[{ name: 'Delete', onClick: () => {} }, { name: 'Cancel', onClick: () => {} }]}
       />
     )
     expect(toJSON(wrapper)).toMatchSnapshot()
@@ -19,7 +19,7 @@ describe('component.UI.Dialog', () => {
 
   it('should render correctly with one button', () => {
     const wrapper = shallow(
-      <Dialog header="Title" onClose={() => {}} buttons={[{ name: 'Ok', onClick: () => {} }]} />
+      <Dialog buttons={[{ name: 'Ok', onClick: () => {} }]} header="Title" onClose={() => {}} />
     )
     expect(toJSON(wrapper)).toMatchSnapshot()
   })
@@ -27,8 +27,8 @@ describe('component.UI.Dialog', () => {
   it('should render correctly with custom content', () => {
     const CustomDialog = () => {
       const customHeader = (
-        <Flex flexDirection="column" alignItems="center" mb={3} alignSelf="stretch">
-          <Globe width={64} height={64} color="white" />
+        <Flex alignItems="center" alignSelf="stretch" flexDirection="column" mb={3}>
+          <Globe color="white" height={64} width={64} />
           <Heading.h2>Custom heading</Heading.h2>
         </Flex>
       )
@@ -45,8 +45,8 @@ describe('component.UI.Dialog', () => {
       )
 
       return (
-        <Dialog header={customHeader} onClose={() => alert('closed')} buttons={customButtons}>
-          <Flex flexDirection="column" alignItems="center">
+        <Dialog buttons={customButtons} header={customHeader} onClose={() => alert('closed')}>
+          <Flex alignItems="center" flexDirection="column">
             <Text fontSize="xl">This is a custom body</Text>
           </Flex>
         </Dialog>
diff --git a/test/unit/components/UI/Dropdown.spec.js b/test/unit/components/UI/Dropdown.spec.js
index 9cdce999276..7348d534f7f 100644
--- a/test/unit/components/UI/Dropdown.spec.js
+++ b/test/unit/components/UI/Dropdown.spec.js
@@ -6,16 +6,16 @@ import { dark } from 'themes'
 const currencies = [
   {
     key: 'btc',
-    name: 'BTC'
+    name: 'BTC',
   },
   {
     key: 'bits',
-    name: 'bits'
+    name: 'bits',
   },
   {
     key: 'sats',
-    name: 'satoshis'
-  }
+    name: 'satoshis',
+  },
 ]
 
 const setCurrency = jest.fn()
@@ -23,7 +23,7 @@ const setCurrency = jest.fn()
 describe('component.Dropdown', () => {
   it('should render correctly', () => {
     const tree = renderer
-      .create(<Dropdown theme={dark} activeKey="btc" items={currencies} onClick={setCurrency} />)
+      .create(<Dropdown activeKey="btc" items={currencies} onClick={setCurrency} theme={dark} />)
       .toJSON()
     expect(tree).toMatchSnapshot()
   })
diff --git a/test/unit/components/UI/Header.spec.js b/test/unit/components/UI/Header.spec.js
index 9a3f82669e7..82ea9f66e45 100644
--- a/test/unit/components/UI/Header.spec.js
+++ b/test/unit/components/UI/Header.spec.js
@@ -21,7 +21,7 @@ describe('component.UI.Header', () => {
     expect(toJSON(wrapper)).toMatchSnapshot()
   })
   it('should render correctly with title, subtitle, and logo', () => {
-    const wrapper = shallow(<Header title="title here" subtitle="logo here" logo="logo here" />)
+    const wrapper = shallow(<Header logo="logo here" subtitle="logo here" title="title here" />)
     expect(toJSON(wrapper)).toMatchSnapshot()
   })
 })
diff --git a/test/unit/components/UI/LightningInvoiceInput.spec.js b/test/unit/components/UI/LightningInvoiceInput.spec.js
index aadb81fc79d..56fbd61b019 100644
--- a/test/unit/components/UI/LightningInvoiceInput.spec.js
+++ b/test/unit/components/UI/LightningInvoiceInput.spec.js
@@ -13,7 +13,7 @@ describe('component.UI.LightningInvoiceInput', () => {
         <IntlProvider locale="en">
           <ThemeProvider theme={dark}>
             <Form>
-              <LightningInvoiceInput field="name" chain="bitcoin" network="mainnet" theme={dark} />
+              <LightningInvoiceInput chain="bitcoin" field="name" network="mainnet" theme={dark} />
             </Form>
           </ThemeProvider>
         </IntlProvider>
diff --git a/test/unit/components/UI/Notification.spec.js b/test/unit/components/UI/Notification.spec.js
index fb742df6f1d..71f2b9b4e5d 100644
--- a/test/unit/components/UI/Notification.spec.js
+++ b/test/unit/components/UI/Notification.spec.js
@@ -35,7 +35,7 @@ describe('component.UI.Notification', () => {
 
   describe('processing', () => {
     it('should render with the spinner', () => {
-      const wrapper = shallow(<Notification processing />)
+      const wrapper = shallow(<Notification isProcessing />)
       expect(wrapper.find(Spinner)).toHaveLength(1)
     })
   })
diff --git a/test/unit/components/UI/ProgressBar.spec.js b/test/unit/components/UI/ProgressBar.spec.js
index 60a6098f847..9862640146a 100644
--- a/test/unit/components/UI/ProgressBar.spec.js
+++ b/test/unit/components/UI/ProgressBar.spec.js
@@ -20,12 +20,12 @@ describe('component.UI.ProgressBar', () => {
   })
 
   it('should render correctly (right justify)', () => {
-    const wrapper = shallow(<ProgressBar progress={0.5} justify="right" />)
+    const wrapper = shallow(<ProgressBar justify="right" progress={0.5} />)
     expect(toJSON(wrapper)).toMatchSnapshot()
   })
 
   it('should render correctly (blue)', () => {
-    const wrapper = shallow(<ProgressBar progress={0.5} color="superBlue" />)
+    const wrapper = shallow(<ProgressBar color="superBlue" progress={0.5} />)
     expect(toJSON(wrapper)).toMatchSnapshot()
   })
 })
diff --git a/test/unit/components/UI/Radio.spec.js b/test/unit/components/UI/Radio.spec.js
index e540366513a..36624b07ea7 100644
--- a/test/unit/components/UI/Radio.spec.js
+++ b/test/unit/components/UI/Radio.spec.js
@@ -11,9 +11,9 @@ describe('component.UI.Radio', () => {
         <ThemeProvider theme={dark}>
           <Form>
             <RadioGroup field="radio">
-              <Radio value="item1" label="Item 1" description="Radio buttons" />
-              <Radio value="item2" label="Item 2" description="can have an optional title" />
-              <Radio value="item3" label="Item 3" description="and description" />
+              <Radio description="Radio buttons" label="Item 1" value="item1" />
+              <Radio description="can have an optional title" label="Item 2" value="item2" />
+              <Radio description="and description" label="Item 3" value="item3" />
             </RadioGroup>
           </Form>
         </ThemeProvider>
diff --git a/test/unit/components/UI/Select.spec.js b/test/unit/components/UI/Select.spec.js
index 73df479b387..4ddd903f211 100644
--- a/test/unit/components/UI/Select.spec.js
+++ b/test/unit/components/UI/Select.spec.js
@@ -13,7 +13,7 @@ describe('component.UI.Toggle', () => {
       { value: 'Pear', key: 'pear' },
       { value: 'Orange', key: 'orange' },
       { value: 'Grape', key: 'grape' },
-      { value: 'Banana', key: 'banana' }
+      { value: 'Banana', key: 'banana' },
     ]
     const tree = renderer
       .create(
diff --git a/test/unit/components/UI/Truncate.spec.js b/test/unit/components/UI/Truncate.spec.js
index 25de53f4fd8..3e3fa54e32c 100644
--- a/test/unit/components/UI/Truncate.spec.js
+++ b/test/unit/components/UI/Truncate.spec.js
@@ -13,7 +13,7 @@ describe('component.UI.Truncate', () => {
   it('should truncate test to a specific length when the maxlen parm is provided', () => {
     const tree = renderer
       .create(
-        <Truncate text="Lorem ipsum dolor sit amet, consectetur adipiscing elit" maxlen={30} />
+        <Truncate maxlen={30} text="Lorem ipsum dolor sit amet, consectetur adipiscing elit" />
       )
       .toJSON()
     expect(tree).toMatchSnapshot()
diff --git a/test/unit/components/UI/__snapshots__/ActionBar.spec.js.snap b/test/unit/components/UI/__snapshots__/ActionBar.spec.js.snap
index 36cd8d7a0bd..3e40fee6864 100644
--- a/test/unit/components/UI/__snapshots__/ActionBar.spec.js.snap
+++ b/test/unit/components/UI/__snapshots__/ActionBar.spec.js.snap
@@ -104,6 +104,7 @@ exports[`component.UI.ActionBar should render correctly 1`] = `
   <button
     className="c1"
     color="white"
+    disabled={false}
     fontSize="inherit"
     fontWeight="bold"
     onClick={[Function]}
@@ -119,6 +120,7 @@ exports[`component.UI.ActionBar should render correctly 1`] = `
   <button
     className="c3"
     color="white"
+    disabled={false}
     fontSize="inherit"
     fontWeight="bold"
     onClick={[Function]}
diff --git a/test/unit/components/UI/__snapshots__/Button.spec.js.snap b/test/unit/components/UI/__snapshots__/Button.spec.js.snap
index 0d28743523f..6e86c6d8ffb 100644
--- a/test/unit/components/UI/__snapshots__/Button.spec.js.snap
+++ b/test/unit/components/UI/__snapshots__/Button.spec.js.snap
@@ -45,6 +45,7 @@ exports[`component.UI.Button should render correctly 1`] = `
 <button
   className="c0"
   color="white"
+  disabled={false}
   fontSize="inherit"
   fontWeight="bold"
 >
diff --git a/test/unit/components/UI/__snapshots__/Checkbox.spec.js.snap b/test/unit/components/UI/__snapshots__/Checkbox.spec.js.snap
index b3229a4cd73..087e3e16fea 100644
--- a/test/unit/components/UI/__snapshots__/Checkbox.spec.js.snap
+++ b/test/unit/components/UI/__snapshots__/Checkbox.spec.js.snap
@@ -86,9 +86,7 @@ exports[`component.UI.Checkbox should render correctly 1`] = `
   onSubmit={[Function]}
 >
   <div
-    checked={false}
     className="c0"
-    disabled={false}
     onClick={[Function]}
   >
     <input
@@ -98,10 +96,8 @@ exports[`component.UI.Checkbox should render correctly 1`] = `
       type="checkbox"
     />
     <div
-      checked={false}
       className="c2 c3"
       color="primaryColor"
-      disabled={false}
       width={18}
     />
     <div
@@ -117,9 +113,7 @@ exports[`component.UI.Checkbox should render correctly 1`] = `
     </div>
   </div>
   <div
-    checked={false}
     className="c0"
-    disabled={false}
     onClick={[Function]}
   >
     <input
@@ -129,10 +123,8 @@ exports[`component.UI.Checkbox should render correctly 1`] = `
       type="checkbox"
     />
     <div
-      checked={false}
       className="c2 c3"
       color="primaryColor"
-      disabled={false}
       width={18}
     />
     <div
diff --git a/test/unit/components/UI/__snapshots__/Dialog.spec.js.snap b/test/unit/components/UI/__snapshots__/Dialog.spec.js.snap
index cb6790c8bd6..8d9245991ad 100644
--- a/test/unit/components/UI/__snapshots__/Dialog.spec.js.snap
+++ b/test/unit/components/UI/__snapshots__/Dialog.spec.js.snap
@@ -5,16 +5,18 @@ exports[`component.UI.Dialog should render correctly with custom content 1`] = `
   buttons={
     <React.Fragment>
       <ForwardRef
-        active={false}
-        processing={false}
+        isActive={false}
+        isDisabled={false}
+        isProcessing={false}
         size="medium"
         variant="primary"
       >
         Primary
       </ForwardRef>
       <ForwardRef
-        active={false}
-        processing={false}
+        isActive={false}
+        isDisabled={false}
+        isProcessing={false}
         size="medium"
         variant="secondary"
       >
@@ -92,10 +94,11 @@ exports[`component.UI.Dialog should render correctly with one button 1`] = `
       pr={6}
     >
       <Button
-        active={false}
+        isActive={false}
+        isDisabled={false}
+        isProcessing={false}
         key="Ok"
         onClick={[Function]}
-        processing={false}
         size="medium"
         variant="primary"
       >
@@ -143,20 +146,22 @@ exports[`component.UI.Dialog should render correctly with two buttons 1`] = `
       pr={6}
     >
       <Button
-        active={false}
+        isActive={false}
+        isDisabled={false}
+        isProcessing={false}
         key="Delete"
         onClick={[Function]}
-        processing={false}
         size="medium"
         variant="primary"
       >
         Delete
       </Button>
       <Button
-        active={false}
+        isActive={false}
+        isDisabled={false}
+        isProcessing={false}
         key="Cancel"
         onClick={[Function]}
-        processing={false}
         size="medium"
         variant="normal"
       >
diff --git a/test/unit/components/UI/__snapshots__/Input.spec.js.snap b/test/unit/components/UI/__snapshots__/Input.spec.js.snap
index 5eaec374015..c1dac1129ab 100644
--- a/test/unit/components/UI/__snapshots__/Input.spec.js.snap
+++ b/test/unit/components/UI/__snapshots__/Input.spec.js.snap
@@ -58,7 +58,6 @@ exports[`component.UI.Input should render correctly 1`] = `
       className="c1"
     >
       <input
-        autoFocus={false}
         className="c2"
         color="primaryText"
         disabled={false}
@@ -68,6 +67,7 @@ exports[`component.UI.Input should render correctly 1`] = `
         onBlur={[Function]}
         onChange={[Function]}
         onFocus={[Function]}
+        readOnly={false}
         required={false}
         value=""
         width={1}
diff --git a/test/unit/components/UI/__snapshots__/NodePubkeyInput.spec.js.snap b/test/unit/components/UI/__snapshots__/NodePubkeyInput.spec.js.snap
index 881a4025a0a..715520f2108 100644
--- a/test/unit/components/UI/__snapshots__/NodePubkeyInput.spec.js.snap
+++ b/test/unit/components/UI/__snapshots__/NodePubkeyInput.spec.js.snap
@@ -58,7 +58,6 @@ exports[`component.UI.NodePubkeyInput should render correctly 1`] = `
       className="c1"
     >
       <input
-        autoFocus={false}
         className="c2"
         color="primaryText"
         disabled={false}
@@ -69,6 +68,7 @@ exports[`component.UI.NodePubkeyInput should render correctly 1`] = `
         onChange={[Function]}
         onFocus={[Function]}
         placeholder="pubkey@host:port"
+        readOnly={false}
         required={false}
         type="text"
         value=""
diff --git a/test/unit/components/UI/__snapshots__/Select.spec.js.snap b/test/unit/components/UI/__snapshots__/Select.spec.js.snap
index c055b944b5a..9de9373efd0 100644
--- a/test/unit/components/UI/__snapshots__/Select.spec.js.snap
+++ b/test/unit/components/UI/__snapshots__/Select.spec.js.snap
@@ -91,7 +91,6 @@ exports[`component.UI.Toggle should render correctly 1`] = `
             aria-controls={null}
             aria-labelledby="downshift-0-label"
             autoComplete="off"
-            autoFocus={false}
             className="c3"
             color="primaryText"
             disabled={false}
@@ -105,6 +104,7 @@ exports[`component.UI.Toggle should render correctly 1`] = `
             onKeyDown={[Function]}
             onMouseDown={[Function]}
             placeholder="Please select"
+            readOnly={false}
             required={false}
             value=""
             width={1}
diff --git a/test/unit/components/UI/__snapshots__/TextArea.spec.js.snap b/test/unit/components/UI/__snapshots__/TextArea.spec.js.snap
index 5eaec374015..c1dac1129ab 100644
--- a/test/unit/components/UI/__snapshots__/TextArea.spec.js.snap
+++ b/test/unit/components/UI/__snapshots__/TextArea.spec.js.snap
@@ -58,7 +58,6 @@ exports[`component.UI.Input should render correctly 1`] = `
       className="c1"
     >
       <input
-        autoFocus={false}
         className="c2"
         color="primaryText"
         disabled={false}
@@ -68,6 +67,7 @@ exports[`component.UI.Input should render correctly 1`] = `
         onBlur={[Function]}
         onChange={[Function]}
         onFocus={[Function]}
+        readOnly={false}
         required={false}
         value=""
         width={1}
diff --git a/test/unit/components/Util/WalletName.spec.js b/test/unit/components/Util/WalletName.spec.js
index e66f871dc32..9edef982fe6 100644
--- a/test/unit/components/Util/WalletName.spec.js
+++ b/test/unit/components/Util/WalletName.spec.js
@@ -10,7 +10,7 @@ describe('component.WalletName', () => {
         type: 'local',
         id: 1,
         host: 'local.host',
-        name: 'Wallet name'
+        name: 'Wallet name',
       }
       const wrapper = shallow(<WalletName wallet={wallet} />)
       expect(toJSON(wrapper)).toMatchSnapshot()
@@ -21,7 +21,7 @@ describe('component.WalletName', () => {
       const wallet = {
         type: 'local',
         id: 1,
-        host: 'local.host'
+        host: 'local.host',
       }
       const wrapper = shallow(<WalletName wallet={wallet} />)
       expect(toJSON(wrapper)).toMatchSnapshot()
@@ -34,7 +34,7 @@ describe('component.WalletName', () => {
         type: 'custom',
         id: 1,
         host: 'local.host',
-        name: 'Wallet name'
+        name: 'Wallet name',
       }
       const wrapper = shallow(<WalletName wallet={wallet} />)
       expect(toJSON(wrapper)).toMatchSnapshot()
@@ -45,7 +45,7 @@ describe('component.WalletName', () => {
       const wallet = {
         type: 'custom',
         id: 1,
-        host: 'local.host'
+        host: 'local.host',
       }
       const wrapper = shallow(<WalletName wallet={wallet} />)
       expect(toJSON(wrapper)).toMatchSnapshot()
diff --git a/test/unit/lnd/lightning.spec.js b/test/unit/lnd/lightning.spec.js
index 5f331551557..eb9b2a47277 100644
--- a/test/unit/lnd/lightning.spec.js
+++ b/test/unit/lnd/lightning.spec.js
@@ -20,7 +20,7 @@ describe('Lightning', function() {
         expect(this.lightning.subscriptions).toMatchObject({
           channelGraph: null,
           invoices: null,
-          transactions: null
+          transactions: null,
         })
       })
     })
diff --git a/test/unit/lnd/lnd-config.spec.js b/test/unit/lnd/lnd-config.spec.js
index ef8a1122de9..db884b113f9 100644
--- a/test/unit/lnd/lnd-config.spec.js
+++ b/test/unit/lnd/lnd-config.spec.js
@@ -7,7 +7,7 @@ jest.mock('lib/lnd/util', () => {
   return {
     ...jest.requireActual('lib/lnd/util'),
     binaryName: 'binaryName',
-    binaryPath: () => 'binaryPath'
+    binaryPath: () => 'binaryPath',
   }
 })
 
@@ -55,7 +55,7 @@ describe('LndConfig', function() {
           id: 1,
           type: this.type,
           chain: this.chain,
-          network: this.network
+          network: this.network,
         })
       })
 
@@ -85,8 +85,8 @@ describe('LndConfig', function() {
           settings: {
             host: this.host,
             cert: this.cert,
-            macaroon: this.macaroon
-          }
+            macaroon: this.macaroon,
+          },
         })
       })
 
diff --git a/test/unit/lnd/neutrino.spec.js b/test/unit/lnd/neutrino.spec.js
index 715fa626ae2..0d339c759e9 100644
--- a/test/unit/lnd/neutrino.spec.js
+++ b/test/unit/lnd/neutrino.spec.js
@@ -7,7 +7,7 @@ import mockSpawn from 'mock-spawn'
 jest.mock('child_process', () => {
   var mockSpawn = require('mock-spawn')
   return {
-    spawn: mockSpawn()
+    spawn: mockSpawn(),
   }
 })
 
@@ -21,11 +21,11 @@ describe('Neutrino', function() {
       it('should set the "process" property to null', () => {
         expect(this.neutrino.process).toEqual(null)
       })
-      it('should set the "walletUnlockerGrpcActive" property to false', () => {
-        expect(this.neutrino.walletUnlockerGrpcActive).toEqual(false)
+      it('should set the "isWalletUnlockerGrpcActive" property to false', () => {
+        expect(this.neutrino.isWalletUnlockerGrpcActive).toEqual(false)
       })
-      it('should set the "lightningGrpcActive" property to false', () => {
-        expect(this.neutrino.lightningGrpcActive).toEqual(false)
+      it('should set the "isLightningGrpcActive" property to false', () => {
+        expect(this.neutrino.isLightningGrpcActive).toEqual(false)
       })
       it('should set the "chainSyncStatus" property to "chain-sync-pending"', () => {
         expect(this.neutrino.chainSyncStatus).toEqual('chain-sync-pending')
diff --git a/test/unit/reducers/activity.spec.js b/test/unit/reducers/activity.spec.js
index e62f3b2769f..0d9d337b91d 100644
--- a/test/unit/reducers/activity.spec.js
+++ b/test/unit/reducers/activity.spec.js
@@ -2,7 +2,7 @@ import activityReducer, {
   SHOW_ACTIVITY_MODAL,
   HIDE_ACTIVITY_MODAL,
   CHANGE_FILTER,
-  UPDATE_SEARCH_TEXT
+  UPDATE_SEARCH_TEXT,
 } from 'reducers/activity'
 
 describe('reducers', () => {
diff --git a/test/unit/reducers/balance.spec.js b/test/unit/reducers/balance.spec.js
index a472fdbc2c4..09160da067b 100644
--- a/test/unit/reducers/balance.spec.js
+++ b/test/unit/reducers/balance.spec.js
@@ -14,7 +14,7 @@ describe('reducers', () => {
       const walletBalance = {
         total_balance: 1,
         confirmed_balance: 1,
-        unconfirmed_balance: 1
+        unconfirmed_balance: 1,
       }
       const channelBalance = 1
       expect(
diff --git a/test/unit/reducers/channels.spec.js b/test/unit/reducers/channels.spec.js
index 07ccfc78770..11b3c9f10de 100644
--- a/test/unit/reducers/channels.spec.js
+++ b/test/unit/reducers/channels.spec.js
@@ -6,7 +6,7 @@ import channelsReducer, {
   RECEIVE_CHANNELS,
   OPENING_CHANNEL,
   OPENING_SUCCESSFUL,
-  OPENING_FAILURE
+  OPENING_FAILURE,
 } from 'reducers/channels'
 
 describe('reducers', () => {
@@ -48,7 +48,7 @@ describe('reducers', () => {
         channelsReducer(undefined, {
           type: RECEIVE_CHANNELS,
           channels: [1, 2],
-          pendingChannels: [3, 4]
+          pendingChannels: [3, 4],
         })
       ).toMatchSnapshot()
     })
diff --git a/test/unit/reducers/info.spec.js b/test/unit/reducers/info.spec.js
index 4efca1a8a77..e8c305cd39d 100644
--- a/test/unit/reducers/info.spec.js
+++ b/test/unit/reducers/info.spec.js
@@ -22,7 +22,7 @@ describe('reducers', () => {
       expect(
         infoReducer(undefined, {
           type: RECEIVE_INFO,
-          data: { semver: '0.5.2', chains: [{ chain: 'bitcoin', network: 'mainnet' }] }
+          data: { semver: '0.5.2', chains: [{ chain: 'bitcoin', network: 'mainnet' }] },
         })
       ).toMatchSnapshot()
     })
diff --git a/test/unit/reducers/invoice.spec.js b/test/unit/reducers/invoice.spec.js
index 613772ffb9d..b80d8cc32f9 100644
--- a/test/unit/reducers/invoice.spec.js
+++ b/test/unit/reducers/invoice.spec.js
@@ -10,7 +10,7 @@ import invoiceReducer, {
   RECEIVE_INVOICES,
   SEND_INVOICE,
   INVOICE_SUCCESSFUL,
-  INVOICE_FAILED
+  INVOICE_FAILED,
 } from 'reducers/invoice'
 
 describe('reducers', () => {
diff --git a/test/unit/reducers/payment.spec.js b/test/unit/reducers/payment.spec.js
index 268838e623e..fd8d31ac174 100644
--- a/test/unit/reducers/payment.spec.js
+++ b/test/unit/reducers/payment.spec.js
@@ -6,7 +6,7 @@ import paymentReducer, {
   RECEIVE_PAYMENTS,
   SEND_PAYMENT,
   PAYMENT_SUCCESSFUL,
-  PAYMENT_FAILED
+  PAYMENT_FAILED,
 } from 'reducers/payment'
 
 describe('reducers', () => {
diff --git a/test/unit/reducers/peers.spec.js b/test/unit/reducers/peers.spec.js
index 453fd76b127..6aac841971f 100644
--- a/test/unit/reducers/peers.spec.js
+++ b/test/unit/reducers/peers.spec.js
@@ -8,7 +8,7 @@ import peersReducer, {
   SET_PEER_FORM,
   SET_PEER,
   GET_PEERS,
-  RECEIVE_PEERS
+  RECEIVE_PEERS,
 } from 'reducers/peers'
 
 describe('reducers', () => {
diff --git a/test/unit/reducers/settingsmenu.spec.js b/test/unit/reducers/settingsmenu.spec.js
index 3a26913954d..2a2824be770 100644
--- a/test/unit/reducers/settingsmenu.spec.js
+++ b/test/unit/reducers/settingsmenu.spec.js
@@ -2,7 +2,7 @@ import settingsReducer, {
   OPEN_SETTINGS,
   CLOSE_SETTINGS,
   SET_ACTIVE_SUBMENU,
-  DISABLE_SUBMENU
+  DISABLE_SUBMENU,
 } from 'reducers/settingsmenu'
 
 describe('reducers', () => {
@@ -38,7 +38,7 @@ describe('reducers', () => {
         settingsReducer(undefined, {
           type: CLOSE_SETTINGS,
           settingsOpen: false,
-          activeSubMenu: null
+          activeSubMenu: null,
         })
       ).toMatchSnapshot()
     })
diff --git a/test/unit/reducers/ticker.spec.js b/test/unit/reducers/ticker.spec.js
index afae26a5fc6..8d892ee1898 100644
--- a/test/unit/reducers/ticker.spec.js
+++ b/test/unit/reducers/ticker.spec.js
@@ -4,7 +4,7 @@ import tickerReducer, {
   SET_CURRENCY,
   SET_CRYPTO,
   GET_TICKERS,
-  RECIEVE_TICKERS
+  RECIEVE_TICKERS,
 } from 'reducers/ticker'
 
 describe('reducers', () => {
diff --git a/test/unit/reducers/transaction.spec.js b/test/unit/reducers/transaction.spec.js
index fa67c7b6d7c..af4b4317dcd 100644
--- a/test/unit/reducers/transaction.spec.js
+++ b/test/unit/reducers/transaction.spec.js
@@ -4,7 +4,7 @@ import transactionReducer, {
   SEND_TRANSACTION,
   TRANSACTION_SUCCESSFUL,
   TRANSACTION_FAILED,
-  ADD_TRANSACTION
+  ADD_TRANSACTION,
 } from 'reducers/transaction'
 
 describe('reducers', () => {
diff --git a/test/unit/utils/btc.spec.js b/test/unit/utils/btc.spec.js
index 81338d51ece..0e34a5c80e0 100644
--- a/test/unit/utils/btc.spec.js
+++ b/test/unit/utils/btc.spec.js
@@ -16,7 +16,7 @@ import {
   millisatoshisToBits,
   millisatoshisToBtc,
   millisatoshisToFiat,
-  convert
+  convert,
 } from 'lib/utils/btc'
 
 describe('btc.btcToBits', () => {
diff --git a/test/unit/utils/isStableVersion.spec.js b/test/unit/utils/isStableVersion.spec.js
index ec768f1dad5..0faf20d0285 100644
--- a/test/unit/utils/isStableVersion.spec.js
+++ b/test/unit/utils/isStableVersion.spec.js
@@ -8,7 +8,7 @@ describe('isStableVersion', () => {
       ['0.3.0-beta', STABLE_VERSION, true],
       ['0.3.1-beta', STABLE_VERSION, true],
       ['0.3.2-alpha', STABLE_VERSION, true],
-      ['0.3.0', STABLE_VERSION, true]
+      ['0.3.0', STABLE_VERSION, true],
     ]
 
     positiveTests.map(test => {
@@ -26,7 +26,7 @@ describe('isStableVersion', () => {
       ['0.2.0-alpha', STABLE_VERSION, false],
       ['0.2.0', STABLE_VERSION, false],
       ['0.4.0-alpha', STABLE_VERSION, false],
-      ['0.4.0-beta', STABLE_VERSION, false]
+      ['0.4.0-beta', STABLE_VERSION, false],
     ]
 
     negativeTests.map(test => {
diff --git a/test/unit/utils/isSubDir.spec.js b/test/unit/utils/isSubDir.spec.js
index e5842f4e627..1462538315c 100644
--- a/test/unit/utils/isSubDir.spec.js
+++ b/test/unit/utils/isSubDir.spec.js
@@ -20,7 +20,7 @@ describe('isSubDir', () => {
     ['/foo', '/foo/../bar'],
     ['/foo', '/foo/./bar'],
     ['/bar/../foo', '/foo/bar'],
-    ['/foo', './bar']
+    ['/foo', './bar'],
   ]
 
   const result = mapSamples(tests)
diff --git a/test/unit/zap/controller.spec.js b/test/unit/zap/controller.spec.js
index 5e9de8a94a9..65b77008d05 100644
--- a/test/unit/zap/controller.spec.js
+++ b/test/unit/zap/controller.spec.js
@@ -21,7 +21,7 @@ describe('ZapController', function() {
       beforeEach(() => {
         Lightning.mockImplementation(() => ({
           subscribe: jest.fn(),
-          connect: jest.fn().mockResolvedValue()
+          connect: jest.fn().mockResolvedValue(),
         }))
         this.controller = new ZapController()
       })
@@ -34,7 +34,7 @@ describe('ZapController', function() {
       beforeEach(() => {
         Lightning.mockImplementation(() => ({
           subscribe: jest.fn(),
-          connect: jest.fn().mockRejectedValue(new Error('Async error'))
+          connect: jest.fn().mockRejectedValue(new Error('Async error')),
         }))
         this.controller = new ZapController()
       })