feat(ui): add ability to configure neutrino nodes for local wallets

renderer/components/Home/WalletLauncher.js

@@ -7,6 +7,7 @@ import { withRouter } from 'react-router-dom'
 import { Box, Flex } from 'rebass/styled-components'
 import styled from 'styled-components'
 import parse from 'lndconnect/parse'
+import isEqual from 'lodash/isEqual'
 import { intlShape } from '@zap/i18n'
 import { isValidBtcPayConfig, isEmbeddedLndConnectURI } from '@zap/utils/connectionString'
 import parseConnectionString from '@zap/utils/btcpayserver'
@@ -53,11 +54,17 @@ const prepareValues = values => clean(formatAutopilot(Object.assign({}, values))
 // converts form format to db/lnd compatible format
 const formToWalletFormat = values => {
   const result = prepareValues(values)
-  const { autopilot, autopilotAllocation } = result
+  const { autopilot, autopilotAllocation, neutrinoNodes } = result
   if (autopilot && autopilotAllocation) {
     // result expects the autopilot allocation to be a decimal.
     result.autopilotAllocation = autopilotAllocation / 100
   }
+
+  // Sanitize neutrinoNodes
+  if (neutrinoNodes) {
+    result.neutrinoNodes = neutrinoNodes.filter(Boolean).map(n => n.trim())
+  }
+
   return result
 }
 
@@ -92,7 +99,7 @@ const clean = obj => {
  * @returns {boolean} True if compared props all match
  */
 const unsafeShallowCompare = (obj1, obj2, whiteList) => {
-  return Object.keys(whiteList).every(key => obj1[key] == obj2[key])
+  return Object.keys(whiteList).every(key => isEqual(obj1[key], obj2[key]))
 }
 
 const LNDCONNECT_BTCPAY_SERVER = 'LNDCONNECT_BTCPAY_SERVER'
@@ -345,6 +352,7 @@ class WalletLauncher extends React.Component {
       autopilot: '',
       alias: '',
       name: '',
+      neutrinoNodes: '',
     }
     // local node
     return !unsafeShallowCompare(

renderer/components/Home/WalletSettingsFormLocal.js

@@ -1,15 +1,34 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import config from 'config'
 import { compose } from 'redux'
 import { withFormApi, withFormState } from 'informed'
 import { FormattedMessage, injectIntl } from 'react-intl'
 import { Box, Flex } from 'rebass/styled-components'
 import { intlShape } from '@zap/i18n'
 import { Bar, Button, DataRow, Text } from 'components/UI'
-import { Input, Label, Toggle } from 'components/Form'
+import { Input, Label, Toggle, TextArea } from 'components/Form'
 import messages from './messages'
 import AutopilotAllocation from './AutopilotAllocation'
 
+export const FieldLabel = ({ itemKey, ...rest }) => {
+  const messageKey = itemKey.replace('.', '_')
+  return (
+    <Box {...rest}>
+      <Label htmlFor={itemKey} mb={2}>
+        <FormattedMessage {...messages[`${messageKey}_label`]} />
+      </Label>
+      <Text color="gray" fontWeight="light">
+        <FormattedMessage {...messages[`${messageKey}_description`]} />
+      </Text>
+    </Box>
+  )
+}
+
+FieldLabel.propTypes = {
+  itemKey: PropTypes.string.isRequired,
+}
+
 class WalletSettingsFormLocal extends React.Component {
   static propTypes = {
     autopilotDefaults: PropTypes.object.isRequired,
@@ -48,6 +67,27 @@ class WalletSettingsFormLocal extends React.Component {
 
           <DataRow left={<FormattedMessage {...messages.chain} />} py={2} right={chain} />
           <DataRow left={<FormattedMessage {...messages.network} />} py={2} right={network} />
+
+          <Bar variant="light" />
+          <DataRow
+            left={<FieldLabel itemKey="neutrinoUrl" />}
+            right={
+              <TextArea
+                field="neutrinoNodes"
+                format={value => value.join('\n')}
+                highlightOnValid={false}
+                initialValue={config.lnd.neutrino[chain][network]}
+                parse={value => {
+                  if (Array.isArray(value)) {
+                    return value
+                  }
+
+                  return value.split('\n')
+                }}
+                width={300}
+              />
+            }
+          />
         </Box>
 
         <Box as="section" mb={4}>