refactor: extract libs and electron code to project root

.babelrc

@@ -0,0 +1,13 @@
+{
+  "plugins": [
+    [
+      "module-resolver",
+      {
+        "root": ["./app"],
+        "alias": {
+          "^@zap/(.+)": "./\\1"
+        }
+      }
+    ]
+  ]
+}

.eslintrc.js

@@ -99,12 +99,13 @@ module.exports = {
   ],
   settings: {
     'import/resolver': {
-      node: {
-        moduleDirectory: ['app', 'node_modules', 'app/node_modules'],
-      },
-      webpack: {
-        config: path.resolve(__dirname, 'webpack', 'webpack.config.eslint.js'),
-      },
+      'babel-module': {},
+    },
+    node: {
+      moduleDirectory: ['app', 'node_modules', 'app/node_modules'],
+    },
+    webpack: {
+      config: path.resolve(__dirname, 'webpack', 'webpack.config.eslint.js'),
     },
   },
 }

.flowconfig

@@ -31,10 +31,10 @@ module.name_mapper.extension='svg' -> '<PROJECT_ROOT>/flow/WebpackAsset.js.flow'
 # Example: components/Foo -> `<project_root>/app/components/Foo`
 module.name_mapper='^components/\(.*\)$' -> '<PROJECT_ROOT>/app/components/\1'
 module.name_mapper='^containers/\(.*\)$' -> '<PROJECT_ROOT>/app/containers/\1'
-module.name_mapper='^icons/\(.*\)$' -> '<PROJECT_ROOT>/app/icons/\1'
-module.name_mapper='^lib/\(.*\)$' -> '<PROJECT_ROOT>/app/lib/\1'
 module.name_mapper='^reducers/\(.*\)$' -> '<PROJECT_ROOT>/app/reducers/\1'
 module.name_mapper='^store/\(.*\)$' -> '<PROJECT_ROOT>/app/store/\1'
 module.name_mapper='^themes/\(.*\)$' -> '<PROJECT_ROOT>/app/themes/\1'
 module.name_mapper='^hocs/\(.*\)$' -> '<PROJECT_ROOT>/app/hocs/\1'
 module.name_mapper='^hooks/\(.*\)$' -> '<PROJECT_ROOT>/app/hooks/\1'
+
+module.name_mapper='^@zap/\(.*\)$' -> '<PROJECT_ROOT>/\1'

.storybook/config.js

@@ -11,7 +11,7 @@ import { linkTo } from '@storybook/addon-links'
 import { setIntlConfig, withIntl } from 'storybook-addon-intl'
 import StoryRouter from 'storybook-react-router'
 import { dark, light } from 'themes'
-import { getDefaultLocale, locales } from 'lib/i18n'
+import { getDefaultLocale, locales } from '@zap/i18n'
 import { BackgroundPrimary, GlobalStyle } from 'components/UI'
 
 const BackgroundPrimaryWithTheme = withTheme(({ theme, ...rest }) => (
@@ -24,16 +24,16 @@ const BackgroundPrimaryWithTheme = withTheme(({ theme, ...rest }) => (
 ))
 
 // Register supported locales.
-import '../app/lib/i18n/locale'
+import '@zap/i18n/locale'
 
 // Get translations.
-import translations from '../app/lib/i18n/translation'
+import translations from '@zap/i18n/translation'
 
 // Set intl configuration
 setIntlConfig({
   locales: locales,
   defaultLocale: getDefaultLocale(),
-  getMessages: locale => translations[locale]
+  getMessages: locale => translations[locale],
 })
 
 // Info
@@ -42,10 +42,10 @@ addDecorator(
     styles: {
       button: {
         base: {
-          background: dark.colors.lightningOrange
-        }
-      }
-    }
+          background: dark.colors.lightningOrange,
+        },
+      },
+    },
   })
 )
 
@@ -67,8 +67,8 @@ addParameters({
     name: 'Zap',
     url: 'https://ln-zap.github.io/zap-desktop',
     theme: themes.dark,
-    hierarchySeparator: /\./
-  }
+    hierarchySeparator: /\./,
+  },
 })
 
 // Zap Global style.
@@ -90,8 +90,8 @@ setDefaults({
     showSource: false,
     allowSourceToggling: false,
     showPropTables: false,
-    allowPropTablesToggling: true
-  }
+    allowPropTablesToggling: true,
+  },
 })
 
 // automatically import all files ending in *.stories.js

.testcafe-electron-rc

@@ -1,4 +1,4 @@
 {
-  "mainWindowUrl": "./app/dist/index.html",
-  "appPath": "./app"
+  "mainWindowUrl": "./dist/index.html",
+  "appPath": "."
 }

app/components/Activity/TransactionModal/TransactionModal.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import get from 'lodash.get'
 import { FormattedDate, FormattedTime, FormattedMessage, FormattedNumber } from 'react-intl'
 import { Flex } from 'rebass'
-import { blockExplorer } from 'lib/utils'
+import { blockExplorer } from '@zap/utils'
 import { Bar, DataRow, Header, Link, Panel, Span, Text } from 'components/UI'
 import { CryptoSelector, CryptoValue, FiatSelector, FiatValue } from 'containers/UI'
 import { Truncate } from 'components/Util'

app/components/Channels/ChannelCreateForm.js

@@ -4,7 +4,7 @@ import { FormattedMessage, injectIntl, intlShape } from 'react-intl'
 import { Keyframes } from 'react-spring'
 import get from 'lodash.get'
 import { Box, Flex } from 'rebass'
-import { convert } from 'lib/utils/btc'
+import { convert } from '@zap/utils/btc'
 import {
   Bar,
   Button,

app/components/Channels/ChannelData.js

@@ -4,7 +4,7 @@ import { FormattedDate, FormattedTime, FormattedMessage } from 'react-intl'
 import styled from 'styled-components'
 import { opacity } from 'styled-system'
 import { Box as BaseBox } from 'rebass'
-import { blockExplorer } from 'lib/utils'
+import { blockExplorer } from '@zap/utils'
 import { Bar, DataRow, Link } from 'components/UI'
 import { Truncate } from 'components/Util'
 import { CryptoValue } from 'containers/UI'

app/components/GlobalNotification/GlobalNotification.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { animated, Transition } from 'react-spring'
 import styled from 'styled-components'
 import { Box } from 'rebass'
-import errorToUserFriendly from 'lib/utils/userFriendlyErrors'
+import errorToUserFriendly from '@zap/utils/userFriendlyErrors'
 import { Notification } from 'components/UI'
 
 const Wrapper = styled(Box)`

app/components/Home/WalletLauncher.js

@@ -6,8 +6,8 @@ import { withRouter } from 'react-router-dom'
 import { Box, Flex } from 'rebass'
 import styled from 'styled-components'
 import parse from 'lndconnect/parse'
-import { isValidBtcPayConfig, isEmbeddedLndConnectURI } from 'lib/utils/connectionString'
-import parseConnectionString from 'lib/utils/btcpayserver'
+import { isValidBtcPayConfig, isEmbeddedLndConnectURI } from '@zap/utils/connectionString'
+import parseConnectionString from '@zap/utils/btcpayserver'
 import { Bar, Button, Heading, Text, ActionBar, Form } from 'components/UI'
 import WalletSettingsFormLocal from './WalletSettingsFormLocal'
 import WalletSettingsFormRemote from './WalletSettingsFormRemote'

app/components/Onboarding/Steps/ConnectionConfirm.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { FormattedMessage } from 'react-intl'
 import encode from 'lndconnect/encode'
 import decode from 'lndconnect/decode'
-import parseConnectionString from 'lib/utils/btcpayserver'
+import parseConnectionString from '@zap/utils/btcpayserver'
 import { Bar, Form, Header, Span, Text } from 'components/UI'
 import messages from './messages'
 

app/components/Pay/Pay.js

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types'
 import { Box } from 'rebass'
 import { animated, Keyframes, Transition } from 'react-spring'
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl'
-import { decodePayReq, getMinFee, getMaxFee, isOnchain, isLn } from 'lib/utils/crypto'
+import { decodePayReq, getMinFee, getMaxFee, isOnchain, isLn } from '@zap/utils/crypto'
 import get from 'lodash.get'
-import { convert } from 'lib/utils/btc'
+import { convert } from '@zap/utils/btc'
 import {
   Bar,
   Form,

app/components/Pay/PaySummaryLightning.js

@@ -2,8 +2,8 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Box, Flex } from 'rebass'
 import { FormattedMessage } from 'react-intl'
-import { convert } from 'lib/utils/btc'
-import { decodePayReq, getNodeAlias } from 'lib/utils/crypto'
+import { convert } from '@zap/utils/btc'
+import { decodePayReq, getNodeAlias } from '@zap/utils/crypto'
 import BigArrowRight from 'components/Icon/BigArrowRight'
 import { Bar, DataRow, Spinner, Text } from 'components/UI'
 import { CryptoSelector, CryptoValue, FiatValue } from 'containers/UI'

app/components/Request/RequestSummary.js

@@ -8,7 +8,7 @@ import {
   intlShape,
   injectIntl,
 } from 'react-intl'
-import { decodePayReq } from 'lib/utils/crypto'
+import { decodePayReq } from '@zap/utils/crypto'
 import copy from 'copy-to-clipboard'
 import { Bar, DataRow, Button, QRCode, Text } from 'components/UI'
 import { CryptoSelector, CryptoValue, FiatSelector, FiatValue } from 'containers/UI'

app/components/Settings/Locale/Locale.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { getLanguageName } from 'lib/i18n'
+import { getLanguageName } from '@zap/i18n'
 import { MenuContainer, Menu, MenuItem } from 'components/UI/Dropdown'
 import { FormattedMessage } from 'react-intl'
 import messages from './messages'

app/components/UI/ActionButton.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import delay from 'lib/utils/delay'
+import delay from '@zap/utils/delay'
 import Button from './Button'
 import Spinner from './Spinner'
 

app/components/UI/CryptoAmountInput.js

@@ -4,8 +4,8 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { asField } from 'informed'
 import * as yup from 'yup'
-import { convert } from 'lib/utils/btc'
-import { formatValue, parseNumber } from 'lib/utils/crypto'
+import { convert } from '@zap/utils/btc'
+import { formatValue, parseNumber } from '@zap/utils/crypto'
 import { withNumberInputMask } from 'hocs'
 import Input from './Input'
 

app/components/UI/CurrencyFieldGroup.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Box, Flex } from 'rebass'
 import { FormattedMessage } from 'react-intl'
-import { convert } from 'lib/utils/btc'
+import { convert } from '@zap/utils/btc'
 import CryptoAmountInput from './CryptoAmountInput'
 import Dropdown from './Dropdown'
 import FiatAmountInput from './FiatAmountInput'

app/components/UI/FiatAmountInput.js

@@ -4,8 +4,8 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { asField } from 'informed'
 import * as yup from 'yup'
-import { convert } from 'lib/utils/btc'
-import { formatValue, parseNumber } from 'lib/utils/crypto'
+import { convert } from '@zap/utils/btc'
+import { formatValue, parseNumber } from '@zap/utils/crypto'
 import { withNumberInputMask } from 'hocs'
 import Input from './Input'
 

app/components/UI/LightningInvoiceInput.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { FormattedMessage, intlShape, injectIntl } from 'react-intl'
 import { asField } from 'informed'
-import { isOnchain, isLn } from 'lib/utils/crypto'
+import { isOnchain, isLn } from '@zap/utils/crypto'
 import TextArea from './TextArea'
 import Message from './Message'
 import messages from './messages'

app/components/UI/LndConnectionStringEditor.js

@@ -3,7 +3,10 @@ import PropTypes from 'prop-types'
 import { Box, Flex } from 'rebass'
 import { withFormApi } from 'informed'
 import Padlock from 'components/Icon/Padlock'
-import { LndConnectionStringInput, Toggle, Span, Label } from '.'
+import LndConnectionStringInput from './LndConnectionStringInput'
+import Toggle from './Toggle'
+import Span from './Span'
+import Label from './Label'
 
 function LndConnectionStringEditor({ formApi, field, hideStringMessage, ...rest }) {
   const isDisabled = formApi.getValue('hideLndConnectUri')

app/components/UI/LndConnectionStringInput.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { intlShape, injectIntl } from 'react-intl'
-import { isValidLndConnectUri, isValidBtcPayConfig } from 'lib/utils/connectionString'
+import { isValidLndConnectUri, isValidBtcPayConfig } from '@zap/utils/connectionString'
 import TextArea from './TextArea'
 import messages from './messages'
 

app/components/UI/Tab.js

@@ -0,0 +1,38 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Flex } from 'rebass'
+import Bar from './Bar'
+import Button from './Button'
+import Text from './Text'
+
+class Tab extends React.PureComponent {
+  static propTypes = {
+    isActive: PropTypes.bool.isRequired,
+    itemKey: PropTypes.string.isRequired,
+    itemValue: PropTypes.node.isRequired,
+    onClick: PropTypes.func.isRequired,
+  }
+
+  render() {
+    const { itemKey, itemValue, isActive, onClick } = this.props
+
+    return (
+      <Flex alignItems="center" flexDirection="column" mr={3}>
+        <Button
+          active={isActive}
+          onClick={() => onClick(itemKey)}
+          px={3}
+          size="small"
+          variant="secondary"
+        >
+          <Text fontWeight="normal">{itemValue}</Text>
+        </Button>
+        {isActive && (
+          <Bar bg="lightningOrange" style={{ maxWidth: '50px', width: '100%', height: '2px' }} />
+        )}
+      </Flex>
+    )
+  }
+}
+
+export default Tab

app/components/UI/Tabs.js

@@ -1,32 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { Flex } from 'rebass'
-import Bar from './Bar'
-import Button from './Button'
-import Text from './Text'
-
-const Tab = ({ itemKey, itemValue, isActive, onClick }) => (
-  <Flex alignItems="center" flexDirection="column" mr={3}>
-    <Button
-      active={isActive}
-      onClick={() => onClick(itemKey)}
-      px={3}
-      size="small"
-      variant="secondary"
-    >
-      <Text fontWeight="normal">{itemValue}</Text>
-    </Button>
-    {isActive && (
-      <Bar bg="lightningOrange" style={{ maxWidth: '50px', width: '100%', height: '2px' }} />
-    )}
-  </Flex>
-)
-Tab.propTypes = {
-  isActive: PropTypes.bool.isRequired,
-  itemKey: PropTypes.string.isRequired,
-  itemValue: PropTypes.node.isRequired,
-  onClick: PropTypes.func.isRequired,
-}
+import Tab from './Tab'
 
 class Tabs extends React.PureComponent {
   static propTypes = {

app/components/UI/Value.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { FormattedNumber } from 'react-intl'
-import { convert } from 'lib/utils/btc'
+import { convert } from '@zap/utils/btc'
 
 const forcePositiveNumber = amount => (amount >= 0 ? amount * 1 : amount * -1)
 

app/components/UI/index.js

@@ -47,6 +47,7 @@ export Sidebar from './Sidebar'
 export Span from './Span'
 export Spinner from './Spinner'
 export StatusIndicator from './StatusIndicator'
+export Tab from './Tab'
 export Tabs from './Tabs'
 export Text from './Text'
 export TextArea from './TextArea'

app/hocs/withNumberInputMask.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import getDisplayName from 'lib/utils/getDisplayName'
+import getDisplayName from '@zap/utils/getDisplayName'
 
 /**
  * A HOC that will add validation of a `required` property to a field.

app/hocs/withRequiredValidation.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import * as yup from 'yup'
-import getDisplayName from 'lib/utils/getDisplayName'
+import getDisplayName from '@zap/utils/getDisplayName'
 
 /**
  * A HOC that will add validation of a `required` property to a field.