refactor(fs): group files by component

Group component related file in a directory named after the component.

app/components/Activity/ActivityModal.js → app/components/Activity/ActivityModal/ActivityModal.js

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types'
 import Isvg from 'react-inlinesvg'
 import x from 'icons/x.svg'
 
-import TransactionModal from './TransactionModal'
-import PaymentModal from './PaymentModal'
-import InvoiceModal from './InvoiceModal'
+import TransactionModal from '../TransactionModal'
+import PaymentModal from '../PaymentModal'
+import InvoiceModal from '../InvoiceModal'
 
 import styles from './ActivityModal.scss'
 

app/components/Activity/ActivityModal.scss → app/components/Activity/ActivityModal/ActivityModal.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   position: relative;

app/components/Activity/ActivityModal/index.js

@@ -0,0 +1,3 @@
+import ActivityModal from './ActivityModal'
+
+export default ActivityModal

app/components/Activity/Countdown.scss → app/components/Activity/Countdown/Countdown.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   display: block;

app/components/Activity/Countdown/index.js

@@ -0,0 +1,3 @@
+import Countdown from './Countdown'
+
+export default Countdown

app/components/Activity/InvoiceModal.js → app/components/Activity/InvoiceModal/InvoiceModal.js

@@ -10,7 +10,7 @@ import { showNotification } from 'lib/utils/notifications'
 import FaAngleDown from 'react-icons/lib/fa/angle-down'
 
 import Value from 'components/Value'
-import Countdown from './Countdown'
+import Countdown from '../Countdown'
 
 import styles from './InvoiceModal.scss'
 

app/components/Activity/InvoiceModal.scss → app/components/Activity/InvoiceModal/InvoiceModal.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   color: $white;

app/components/Activity/InvoiceModal/index.js

@@ -0,0 +1,3 @@
+import InvoiceModal from './InvoiceModal'
+
+export default InvoiceModal

app/components/Activity/PaymentModal.scss → app/components/Activity/PaymentModal/PaymentModal.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   color: $white;

app/components/Activity/PaymentModal/index.js

@@ -0,0 +1,3 @@
+import PaymentModal from './PaymentModal'
+
+export default PaymentModal

app/components/Activity/TransactionModal.scss → app/components/Activity/TransactionModal/TransactionModal.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   color: $white;

app/components/Activity/TransactionModal/index.js

@@ -0,0 +1,3 @@
+import TransactionModal from './TransactionModal'
+
+export default TransactionModal

app/components/Contacts/AddChannel.js

@@ -1,171 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import Isvg from 'react-inlinesvg'
-
-import x from 'icons/x.svg'
-
-import styles from './AddChannel.scss'
-
-class AddChannel extends Component {
-  constructor(props) {
-    super(props)
-    this.searchInput = React.createRef()
-  }
-
-  componentDidMount() {
-    // Focus the search input field.
-    this.searchInput.current.focus()
-  }
-
-  render() {
-    const {
-      contactsform,
-      closeContactsForm,
-      openSubmitChannelForm,
-      updateContactFormSearchQuery,
-      updateManualFormSearchQuery,
-      setNode,
-      activeChannelPubkeys,
-      nonActiveChannelPubkeys,
-      pendingOpenChannelPubkeys,
-      filteredNetworkNodes,
-      loadingChannelPubkeys,
-      showManualForm,
-      openManualForm
-    } = this.props
-    const renderRightSide = node => {
-      if (loadingChannelPubkeys.includes(node.pub_key)) {
-        return (
-          <span className={styles.inactive}>
-            <div className={styles.loading}>
-              <div className={styles.spinner} />
-            </div>
-          </span>
-        )
-      }
-
-      if (activeChannelPubkeys.includes(node.pub_key)) {
-        return (
-          <span className={`${styles.online} ${styles.inactive}`}>
-            <span>Online</span>
-          </span>
-        )
-      }
-
-      if (nonActiveChannelPubkeys.includes(node.pub_key)) {
-        return (
-          <span className={`${styles.offline} ${styles.inactive}`}>
-            <span>Offline</span>
-          </span>
-        )
-      }
-
-      if (pendingOpenChannelPubkeys.includes(node.pub_key)) {
-        return (
-          <span className={`${styles.pending} ${styles.inactive}`}>
-            <span>Pending</span>
-          </span>
-        )
-      }
-
-      if (!node.addresses.length) {
-        return <span className={`${styles.private} ${styles.inactive}`}>Private</span>
-      }
-
-      return (
-        <span
-          className={styles.connect}
-          onClick={() => {
-            // set the node public key for the submit form
-            setNode(node)
-            // open the submit form
-            openSubmitChannelForm()
-          }}
-        >
-          Connect
-        </span>
-      )
-    }
-
-    const searchUpdated = search => {
-      updateContactFormSearchQuery(search)
-
-      if (search.includes('@') && search.split('@')[0].length === 66) {
-        updateManualFormSearchQuery(search)
-      }
-    }
-
-    return (
-      <div className={styles.container}>
-        <header className={styles.header}>
-          <input
-            type="text"
-            placeholder="Search the network..."
-            className={styles.searchInput}
-            value={contactsform.searchQuery}
-            onChange={event => searchUpdated(event.target.value)}
-            ref={this.searchInput}
-          />
-          <span onClick={closeContactsForm} className={styles.closeIcon}>
-            <Isvg src={x} />
-          </span>
-        </header>
-
-        <section className={styles.nodes}>
-          <ul className={styles.networkResults}>
-            {filteredNetworkNodes.map(node => (
-              <li key={node.pub_key}>
-                <section>
-                  {node.alias.length > 0 ? (
-                    <h2>
-                      <span>{node.alias.trim()}</span>
-                      <span>
-                        ({node.pub_key.substr(0, 10)}
-                        ...
-                        {node.pub_key.substr(node.pub_key.length - 10)})
-                      </span>
-                    </h2>
-                  ) : (
-                    <h2>
-                      <span>{node.pub_key}</span>
-                    </h2>
-                  )}
-                </section>
-                <section>{renderRightSide(node)}</section>
-              </li>
-            ))}
-          </ul>
-        </section>
-
-        {showManualForm && (
-          <section className={styles.manualForm}>
-            <p>
-              Hm, looks like we can&apos;t see that node from here, wanna try to manually connect?
-            </p>
-            <div className={styles.manualConnectButton} onClick={openManualForm}>
-              Connect Manually
-            </div>
-          </section>
-        )}
-      </div>
-    )
-  }
-}
-
-AddChannel.propTypes = {
-  contactsform: PropTypes.object.isRequired,
-  closeContactsForm: PropTypes.func.isRequired,
-  openSubmitChannelForm: PropTypes.func.isRequired,
-  updateContactFormSearchQuery: PropTypes.func.isRequired,
-  updateManualFormSearchQuery: PropTypes.func.isRequired,
-  setNode: PropTypes.func.isRequired,
-  activeChannelPubkeys: PropTypes.array.isRequired,
-  nonActiveChannelPubkeys: PropTypes.array.isRequired,
-  pendingOpenChannelPubkeys: PropTypes.array.isRequired,
-  filteredNetworkNodes: PropTypes.array.isRequired,
-  loadingChannelPubkeys: PropTypes.array.isRequired,
-  showManualForm: PropTypes.bool.isRequired,
-  openManualForm: PropTypes.func.isRequired
-}
-
-export default AddChannel

app/components/Contacts/AddChannel/AddChannel.js

@@ -0,0 +1,158 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Isvg from 'react-inlinesvg'
+
+import x from 'icons/x.svg'
+
+import styles from './AddChannel.scss'
+
+const AddChannel = ({
+  contactsform,
+  closeContactsForm,
+  openSubmitChannelForm,
+  updateContactFormSearchQuery,
+  updateManualFormSearchQuery,
+  setNode,
+  activeChannelPubkeys,
+  nonActiveChannelPubkeys,
+  pendingOpenChannelPubkeys,
+  filteredNetworkNodes,
+  loadingChannelPubkeys,
+  showManualForm,
+  openManualForm
+}) => {
+  const renderRightSide = node => {
+    if (loadingChannelPubkeys.includes(node.pub_key)) {
+      return (
+        <span className={styles.inactive}>
+          <div className={styles.loading}>
+            <div className={styles.spinner} />
+          </div>
+        </span>
+      )
+    }
+
+    if (activeChannelPubkeys.includes(node.pub_key)) {
+      return (
+        <span className={`${styles.online} ${styles.inactive}`}>
+          <span>Online</span>
+        </span>
+      )
+    }
+
+    if (nonActiveChannelPubkeys.includes(node.pub_key)) {
+      return (
+        <span className={`${styles.offline} ${styles.inactive}`}>
+          <span>Offline</span>
+        </span>
+      )
+    }
+
+    if (pendingOpenChannelPubkeys.includes(node.pub_key)) {
+      return (
+        <span className={`${styles.pending} ${styles.inactive}`}>
+          <span>Pending</span>
+        </span>
+      )
+    }
+
+    if (!node.addresses.length) {
+      return <span className={`${styles.private} ${styles.inactive}`}>Private</span>
+    }
+
+    return (
+      <span
+        className={styles.connect}
+        onClick={() => {
+          // set the node public key for the submit form
+          setNode(node)
+          // open the submit form
+          openSubmitChannelForm()
+        }}
+      >
+        Connect
+      </span>
+    )
+  }
+
+  const searchUpdated = search => {
+    updateContactFormSearchQuery(search)
+
+    if (search.includes('@') && search.split('@')[0].length === 66) {
+      updateManualFormSearchQuery(search)
+    }
+  }
+
+  return (
+    <div className={styles.container}>
+      <header className={styles.header}>
+        <input
+          type="text"
+          placeholder="Search the network..."
+          className={styles.searchInput}
+          value={contactsform.searchQuery}
+          onChange={event => searchUpdated(event.target.value)}
+          // ref={input => input && input.focus()}
+        />
+        <span onClick={closeContactsForm} className={styles.closeIcon}>
+          <Isvg src={x} />
+        </span>
+      </header>
+
+      <section className={styles.nodes}>
+        <ul className={styles.networkResults}>
+          {filteredNetworkNodes.map(node => (
+            <li key={node.pub_key}>
+              <section>
+                {node.alias.length > 0 ? (
+                  <h2>
+                    <span>{node.alias.trim()}</span>
+                    <span>
+                      ({node.pub_key.substr(0, 10)}
+                      ...
+                      {node.pub_key.substr(node.pub_key.length - 10)})
+                    </span>
+                  </h2>
+                ) : (
+                  <h2>
+                    <span>{node.pub_key}</span>
+                  </h2>
+                )}
+              </section>
+              <section>{renderRightSide(node)}</section>
+            </li>
+          ))}
+        </ul>
+      </section>
+
+      {showManualForm && (
+        <section className={styles.manualForm}>
+          <p>
+            Hm, looks like we can&apos;t see that node from here, wanna try to manually connect?
+          </p>
+          <div className={styles.manualConnectButton} onClick={openManualForm}>
+            Connect Manually
+          </div>
+        </section>
+      )}
+    </div>
+  )
+}
+
+AddChannel.propTypes = {
+  contactsform: PropTypes.object.isRequired,
+  closeContactsForm: PropTypes.func.isRequired,
+  openSubmitChannelForm: PropTypes.func.isRequired,
+  updateContactFormSearchQuery: PropTypes.func.isRequired,
+  updateManualFormSearchQuery: PropTypes.func.isRequired,
+  setNode: PropTypes.func.isRequired,
+  activeChannelPubkeys: PropTypes.array.isRequired,
+  nonActiveChannelPubkeys: PropTypes.array.isRequired,
+  pendingOpenChannelPubkeys: PropTypes.array.isRequired,
+  filteredNetworkNodes: PropTypes.array.isRequired,
+  loadingChannelPubkeys: PropTypes.array.isRequired,
+  showManualForm: PropTypes.bool.isRequired,
+  openManualForm: PropTypes.func.isRequired
+}
+
+export default AddChannel

app/components/Contacts/AddChannel.scss → app/components/Contacts/AddChannel/AddChannel.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   position: relative;

app/components/Contacts/AddChannel/index.js

@@ -0,0 +1,3 @@
+import AddChannel from './AddChannel'
+
+export default AddChannel

app/components/Contacts/ChannelForm.js → app/components/Contacts/ChannelForm/ChannelForm.js

@@ -4,8 +4,8 @@ import PropTypes from 'prop-types'
 import Isvg from 'react-inlinesvg'
 import x from 'icons/x.svg'
 
-import ConnectManually from './ConnectManually'
-import SubmitChannelForm from './SubmitChannelForm'
+import ConnectManually from '../ConnectManually'
+import SubmitChannelForm from '../SubmitChannelForm'
 
 import styles from './ChannelForm.scss'
 

app/components/Contacts/ChannelForm.scss → app/components/Contacts/ChannelForm/ChannelForm.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   position: absolute;

app/components/Contacts/ChannelForm/index.js

@@ -0,0 +1,3 @@
+import ChannelForm from './ChannelForm'
+
+export default ChannelForm

app/components/Contacts/ConnectManually.scss → app/components/Contacts/ConnectManually/ConnectManually.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   position: absolute;

app/components/Contacts/ConnectManually/index.js

@@ -0,0 +1,3 @@
+import ConnectManually from './ConnectManually'
+
+export default ConnectManually

app/components/Contacts/ContactModal.scss → app/components/Contacts/ContactModal/ContactModal.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .header {
   display: flex;

app/components/Contacts/ContactModal/index.js

@@ -0,0 +1,3 @@
+import ContactModal from './ContactModal'
+
+export default ContactModal

app/components/Contacts/ContactsForm.scss → app/components/Contacts/ContactsForm/ContactsForm.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .modal {
   position: absolute;

app/components/Contacts/ContactsForm/index.js

@@ -0,0 +1,3 @@
+import ContactsForm from './ContactsForm'
+
+export default ContactsForm

app/components/Contacts/Network.js → app/components/Contacts/Network/Network.js

@@ -10,7 +10,7 @@ import plus from 'icons/plus.svg'
 import search from 'icons/search.svg'
 
 import Value from 'components/Value'
-import SuggestedNodes from './SuggestedNodes'
+import SuggestedNodes from '../SuggestedNodes'
 
 import styles from './Network.scss'
 

app/components/Contacts/Network.scss → app/components/Contacts/Network/Network.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .network {
   position: relative;

app/components/Contacts/Network/index.js

@@ -0,0 +1,3 @@
+import Network from './Network'
+
+export default Network

app/components/Contacts/SubmitChannelForm.scss → app/components/Contacts/SubmitChannelForm/SubmitChannelForm.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .content {
   padding: 0 40px;

app/components/Contacts/SubmitChannelForm/index.js

@@ -0,0 +1,3 @@
+import SubmitChannelForm from './SubmitChannelForm'
+
+export default SubmitChannelForm

app/components/Contacts/SuggestedNodes.scss → app/components/Contacts/SuggestedNodes/SuggestedNodes.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   color: $white;

app/components/Contacts/SuggestedNodes/index.js

@@ -0,0 +1,3 @@
+import SuggestedNodes from './SuggestedNodes'
+
+export default SuggestedNodes

app/components/Form/Pay.scss → app/components/Form/Pay/Pay.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   padding: 0 40px;

app/components/Form/Pay/index.js

@@ -0,0 +1,3 @@
+import Pay from './Pay'
+
+export default Pay

app/components/Form/Request.js

@@ -1,149 +0,0 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-
-import Isvg from 'react-inlinesvg'
-import hand from 'icons/hand.svg'
-import FaAngleDown from 'react-icons/lib/fa/angle-down'
-
-import { btc } from 'lib/utils'
-import AmountInput from 'components/AmountInput'
-import styles from './Request.scss'
-
-class Request extends Component {
-  constructor(props) {
-    super(props)
-    this.amountInput = React.createRef()
-  }
-
-  componentDidMount() {
-    const { setRequestMemo, setRequestAmount } = this.props
-
-    // Clear the form of any previous data.
-    setRequestMemo('')
-    setRequestAmount('')
-
-    // Focus the amount input field.
-    this.amountInput.current.focusTextInput()
-  }
-
-  render() {
-    const {
-      requestform: { amount, memo, showCurrencyFilters },
-      ticker,
-
-      setRequestAmount,
-      setRequestMemo,
-      setCurrency,
-      setRequestCurrencyFilters,
-      currencyName,
-      requestFiatAmount,
-
-      currentCurrencyFilters,
-
-      onRequestSubmit
-    } = this.props
-
-    const onCurrencyFilterClick = currency => {
-      // change the input amount
-      setRequestAmount(btc.convert(ticker.currency, currency, amount))
-
-      setCurrency(currency)
-      setRequestCurrencyFilters(false)
-    }
-
-    return (
-      <div className={styles.container}>
-        <header className={styles.header}>
-          <Isvg src={hand} />
-          <h1>Request Payment</h1>
-        </header>
-
-        <div className={styles.content}>
-          <section className={styles.amount}>
-            <div className={styles.top}>
-              <label htmlFor="amount">Amount</label>
-              <span />
-            </div>
-            <div className={styles.bottom}>
-              <AmountInput
-                id="amount"
-                amount={amount}
-                currency={ticker.currency}
-                onChangeEvent={setRequestAmount}
-                ref={this.amountInput}
-              />
-              <div className={styles.currency}>
-                <section
-                  className={styles.currentCurrency}
-                  onClick={() => setRequestCurrencyFilters(!showCurrencyFilters)}
-                >
-                  <span>{currencyName}</span>
-                  <span>
-                    <FaAngleDown />
-                  </span>
-                </section>
-                <ul className={showCurrencyFilters ? styles.active : undefined}>
-                  {currentCurrencyFilters.map(filter => (
-                    <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>
-                      {filter.name}
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            </div>
-
-            <div className={styles.fiatAmount}>{`≈ ${requestFiatAmount || 0} ${
-              ticker.fiatTicker
-            }`}</div>
-          </section>
-
-          <section className={styles.memo}>
-            <div className={styles.top}>
-              <label htmlFor="memo">Memo</label>
-            </div>
-            <div className={styles.bottom}>
-              <input
-                type="text"
-                placeholder="Details about the request"
-                value={memo}
-                onChange={event => setRequestMemo(event.target.value)}
-                id="memo"
-              />
-            </div>
-          </section>
-
-          <section className={styles.submit}>
-            <div
-              className={`${styles.button} ${amount > 0 ? styles.active : undefined}`}
-              onClick={onRequestSubmit}
-            >
-              Request
-            </div>
-          </section>
-        </div>
-      </div>
-    )
-  }
-}
-
-Request.propTypes = {
-  requestform: PropTypes.shape({
-    amount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    memo: PropTypes.string
-  }).isRequired,
-
-  requestFiatAmount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  currencyName: PropTypes.string.isRequired,
-
-  currentCurrencyFilters: PropTypes.array.isRequired,
-
-  setRequestAmount: PropTypes.func.isRequired,
-  setRequestMemo: PropTypes.func.isRequired,
-  onRequestSubmit: PropTypes.func.isRequired,
-  setCurrency: PropTypes.func.isRequired,
-  setRequestCurrencyFilters: PropTypes.func.isRequired,
-
-  ticker: PropTypes.object.isRequired
-}
-
-export default Request

app/components/Form/Request/Request.js

@@ -0,0 +1,128 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+import Isvg from 'react-inlinesvg'
+import hand from 'icons/hand.svg'
+import FaAngleDown from 'react-icons/lib/fa/angle-down'
+
+import { btc } from 'lib/utils'
+import AmountInput from 'components/AmountInput'
+import styles from './Request.scss'
+
+const Request = ({
+  requestform: { amount, memo, showCurrencyFilters },
+  ticker,
+
+  setRequestAmount,
+  setRequestMemo,
+  setCurrency,
+  setRequestCurrencyFilters,
+  currencyName,
+  requestFiatAmount,
+
+  currentCurrencyFilters,
+
+  onRequestSubmit
+}) => {
+  const onCurrencyFilterClick = currency => {
+    // change the input amount
+    setRequestAmount(btc.convert(ticker.currency, currency, amount))
+
+    setCurrency(currency)
+    setRequestCurrencyFilters(false)
+  }
+
+  return (
+    <div className={styles.container}>
+      <header className={styles.header}>
+        <Isvg src={hand} />
+        <h1>Request Payment</h1>
+      </header>
+
+      <div className={styles.content}>
+        <section className={styles.amount}>
+          <div className={styles.top}>
+            <label htmlFor="amount">Amount</label>
+            <span />
+          </div>
+          <div className={styles.bottom}>
+            <AmountInput
+              id="amount"
+              amount={amount}
+              currency={ticker.currency}
+              onChangeEvent={setRequestAmount}
+            />
+            <div className={styles.currency}>
+              <section
+                className={styles.currentCurrency}
+                onClick={() => setRequestCurrencyFilters(!showCurrencyFilters)}
+              >
+                <span>{currencyName}</span>
+                <span>
+                  <FaAngleDown />
+                </span>
+              </section>
+              <ul className={showCurrencyFilters ? styles.active : undefined}>
+                {currentCurrencyFilters.map(filter => (
+                  <li key={filter.key} onClick={() => onCurrencyFilterClick(filter.key)}>
+                    {filter.name}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+
+          <div className={styles.fiatAmount}>{`≈ ${requestFiatAmount || 0} ${
+            ticker.fiatTicker
+          }`}</div>
+        </section>
+
+        <section className={styles.memo}>
+          <div className={styles.top}>
+            <label htmlFor="memo">Memo</label>
+          </div>
+          <div className={styles.bottom}>
+            <input
+              type="text"
+              placeholder="Details about the request"
+              value={memo}
+              onChange={event => setRequestMemo(event.target.value)}
+              id="memo"
+            />
+          </div>
+        </section>
+
+        <section className={styles.submit}>
+          <div
+            className={`${styles.button} ${amount > 0 ? styles.active : undefined}`}
+            onClick={onRequestSubmit}
+          >
+            Request
+          </div>
+        </section>
+      </div>
+    </div>
+  )
+}
+
+Request.propTypes = {
+  requestform: PropTypes.shape({
+    amount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    memo: PropTypes.string
+  }).isRequired,
+
+  requestFiatAmount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  currencyName: PropTypes.string.isRequired,
+
+  currentCurrencyFilters: PropTypes.array.isRequired,
+
+  setRequestAmount: PropTypes.func.isRequired,
+  setRequestMemo: PropTypes.func.isRequired,
+  onRequestSubmit: PropTypes.func.isRequired,
+  setCurrency: PropTypes.func.isRequired,
+  setRequestCurrencyFilters: PropTypes.func.isRequired,
+
+  ticker: PropTypes.object.isRequired
+}
+
+export default Request

app/components/Form/Request.scss → app/components/Form/Request/Request.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   padding: 0 40px;

app/components/Form/Request/index.js

@@ -0,0 +1,3 @@
+import Request from './Request'
+
+export default Request

app/components/Onboarding/Alias.scss → app/components/Onboarding/Alias/Alias.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .alias {
   background: transparent;

app/components/Onboarding/Alias/index.js

@@ -0,0 +1,3 @@
+import Alias from './Alias'
+
+export default Alias

app/components/Onboarding/Autopilot.scss → app/components/Onboarding/Autopilot/Autopilot.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   color: $white;

app/components/Onboarding/Autopilot/index.js

@@ -0,0 +1,3 @@
+import Autopilot from './Autopilot'
+
+export default Autopilot

app/components/Onboarding/BtcPayServer.scss → app/components/Onboarding/BtcPayServer/BtcPayServer.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   color: $white;

app/components/Onboarding/BtcPayServer/index.js

@@ -0,0 +1,3 @@
+import BtcPayServer from './BtcPayServer'
+
+export default BtcPayServer

app/components/Onboarding/ConnectionConfirm.scss → app/components/Onboarding/ConnectionConfirm/ConnectionConfirm.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   color: $white;

app/components/Onboarding/ConnectionConfirm/index.js

@@ -0,0 +1,3 @@
+import ConnectionConfirm from './ConnectionConfirm'
+
+export default ConnectionConfirm

app/components/Onboarding/ConnectionDetails.scss → app/components/Onboarding/ConnectionDetails/ConnectionDetails.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   color: $white;

app/components/Onboarding/ConnectionDetails/index.js

@@ -0,0 +1,3 @@
+import ConnectionDetails from './ConnectionDetails'
+
+export default ConnectionDetails

app/components/Onboarding/ConnectionType.scss → app/components/Onboarding/ConnectionType/ConnectionType.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   color: $white;

app/components/Onboarding/ConnectionType/index.js

@@ -0,0 +1,3 @@
+import ConnectionType from './ConnectionType'
+
+export default ConnectionType

app/components/Onboarding/FormContainer.scss → app/components/Onboarding/FormContainer/FormContainer.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   position: relative;

app/components/Onboarding/FormContainer/index.js

@@ -0,0 +1,3 @@
+import FormContainer from './FormContainer'
+
+export default FormContainer

app/components/Onboarding/InitWallet.js → app/components/Onboarding/InitWallet/InitWallet.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Login from './Login'
-import Signup from './Signup'
+import Signup from 'components/Onboarding/Signup'
+import Login from 'components/Onboarding/Login'
 import styles from './InitWallet.scss'
 
 const InitWallet = ({ hasSeed, loginProps, signupProps }) => (

app/components/Onboarding/InitWallet.scss → app/components/Onboarding/InitWallet/InitWallet.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   position: relative;

app/components/Onboarding/InitWallet/index.js

@@ -0,0 +1,3 @@
+import InitWallet from './InitWallet'
+
+export default InitWallet

app/components/Onboarding/Login.scss → app/components/Onboarding/Login/Login.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   position: relative;

app/components/Onboarding/Login/index.js

@@ -0,0 +1,3 @@
+import Login from './Login'
+
+export default Login

app/components/Onboarding/NewWalletPassword.scss → app/components/Onboarding/NewWalletPassword/NewWalletPassword.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .input:nth-child(2) {
   margin-top: 30px;

app/components/Onboarding/NewWalletPassword/index.js

@@ -0,0 +1,3 @@
+import NewWalletPassword from './NewWalletPassword'
+
+export default NewWalletPassword

app/components/Onboarding/NewWalletSeed.scss → app/components/Onboarding/NewWalletSeed/NewWalletSeed.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   font-size: 14px;

app/components/Onboarding/NewWalletSeed/index.js

@@ -0,0 +1,3 @@
+import NewWalletSeed from './NewWalletSeed'
+
+export default NewWalletSeed

app/components/Onboarding/ReEnterSeed.scss → app/components/Onboarding/ReEnterSeed/ReEnterSeed.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .seedContainer {
   display: flex;

app/components/Onboarding/ReEnterSeed/index.js

@@ -0,0 +1,3 @@
+import ReEnterSeed from './ReEnterSeed'
+
+export default ReEnterSeed

app/components/Onboarding/RecoverForm.scss → app/components/Onboarding/RecoverForm/RecoverForm.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .seedContainer {
   position: relative;

app/components/Onboarding/RecoverForm/index.js

@@ -0,0 +1,3 @@
+import RecoverForm from './RecoverForm'
+
+export default RecoverForm

app/components/Onboarding/Signup.scss → app/components/Onboarding/Signup/Signup.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   color: $white;

app/components/Onboarding/Signup/index.js

@@ -0,0 +1,3 @@
+import Signup from './Signup'
+
+export default Signup

app/components/Onboarding/Syncing.scss → app/components/Onboarding/Syncing/Syncing.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .container {
   position: relative;

app/components/Onboarding/Syncing/index.js

@@ -0,0 +1,3 @@
+import Syncing from './Syncing'
+
+export default Syncing

app/components/Settings/Fiat.scss → app/components/Settings/Fiat/Fiat.scss

@@ -1,4 +1,4 @@
-@import '../../styles/variables.scss';
+@import '../../../styles/variables.scss';
 
 .submenuHeader {
   padding: 20px;

app/components/Settings/Fiat/index.js

@@ -0,0 +1,3 @@
+import Fiat from './Fiat'
+
+export default Fiat

app/components/Settings/Menu/index.js

@@ -0,0 +1,3 @@
+import Menu from './Menu'
+
+export default Menu

app/components/Settings/index.js

@@ -0,0 +1,3 @@
+import Settings from './Settings'
+
+export default Settings