feat(ui): add ability to edit remote connections that use lndconnect

fix LN-Zap#1624
korhaliv · Mar 7, 2019 · 04175e9 · 04175e9
1 parent 618999f
commit 04175e9
Show file tree

Hide file tree

Showing 3 changed files with 120 additions and 86 deletions.
diff --git a/app/components/Home/WalletLauncher.js b/app/components/Home/WalletLauncher.js
@@ -186,25 +186,32 @@ class WalletLauncher extends React.Component {
       const { values } = formState
       let result = values
 
-      // for the remote wallets we need to re-generate lndconnectUri and QR using updated
-      // host, cert and macaroon values. This is done in the main process
-      // this process is skipped if original lndconnect uri contains raw cert or macaroon and not paths
-      if (wallet.type !== 'local' && !isEmbeddedLndConnectURI(wallet.lndconnectUri)) {
-        // wait for the config generate complete message from the main process
-        const generatedConfig = formToWalletFormat(
-          await refreshLndConnectURI(
-            Object.assign({}, values, {
-              lndconnectUri: undefined, // delete wallets so the main process re-generates them
-              lndconnectQRCode: undefined
-            })
+      if (wallet.type !== 'local') {
+        if (isEmbeddedLndConnectURI(wallet.lndconnectUri)) {
+          result = formToWalletFormat(
+            await refreshLndConnectURI(
+              Object.assign({}, { lndconnectQRCode: values.lndconnectUri }, values)
+            )
           )
-        )
-
-        // update form state with decoded host, cert and macaroon since they are derived from
-        // lndconnect uri and thus corresponding fields will go blank after new config is set
-        const { host, cert, macaroon } = parseLndConnectURI(generatedConfig.lndconnectUri)
-        formApi.setValues(Object.assign({}, generatedConfig, { host, cert, macaroon }))
-        result = generatedConfig
+        } else {
+          // for the remote wallets we need to re-generate lndconnectUri and QR using updated
+          // host, cert and macaroon values. This is done in the main process
+          // this process is skipped if original lndconnect uri contains raw cert or macaroon and not paths
+          const generatedConfig = formToWalletFormat(
+            await refreshLndConnectURI(
+              // wait for the config generate complete message from the main process
+              Object.assign({}, values, {
+                lndconnectUri: undefined, // delete wallets so the main process re-generates them
+                lndconnectQRCode: undefined
+              })
+            )
+          )
+          // update form state with decoded host, cert and macaroon since they are derived from
+          // lndconnect uri and thus corresponding fields will go blank after new config is set
+          const { host, cert, macaroon } = parseLndConnectURI(generatedConfig.lndconnectUri)
+          formApi.setValues(Object.assign({}, generatedConfig, { host, cert, macaroon }))
+          result = generatedConfig
+        }
       } else {
         result = formToWalletFormat(values)
       }
@@ -254,7 +261,10 @@ class WalletLauncher extends React.Component {
     // 5. it is required to use unsafe shallow compare so "5" equals 5
     if (wallet.type !== 'local') {
       if (isEmbeddedLndConnectURI(wallet.lndconnectUri)) {
-        return !unsafeShallowCompare(clean(wallet), clean(formState.values), { name: '' })
+        return !unsafeShallowCompare(clean(wallet), clean(formState.values), {
+          name: '',
+          lndconnectUri: ''
+        })
       }
 
       const { host, cert, macaroon } = parseLndConnectURI(wallet.lndconnectUri)
@@ -341,7 +351,7 @@ class WalletLauncher extends React.Component {
               ) : (
                 <WalletSettingsFormRemote
                   wallet={walletConverted}
-                  showConnectionSettings={!isEmbeddedLndConnectURI(wallet.lndconnectUri)}
+                  isEmbeddedConnectionString={isEmbeddedLndConnectURI(wallet.lndconnectUri)}
                   {...parseLndConnectURI(wallet.lndconnectUri)}
                 />
               )}

diff --git a/app/components/Home/WalletSettingsFormRemote.js b/app/components/Home/WalletSettingsFormRemote.js
@@ -1,8 +1,17 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl'
 import { Box } from 'rebass'
-import { Bar, DataRow, Input, Text, OpenDialogInput, RowLabel } from 'components/UI'
+import {
+  Bar,
+  DataRow,
+  Input,
+  Text,
+  OpenDialogInput,
+  RowLabel,
+  LndConnectionStringEditor
+} from 'components/UI'
 
 import messages from './messages'
 
@@ -12,7 +21,7 @@ const WalletSettingsFormRemote = ({
   host,
   cert,
   macaroon,
-  showConnectionSettings
+  isEmbeddedConnectionString
 }) => {
   return (
     <>
@@ -25,67 +34,85 @@ const WalletSettingsFormRemote = ({
         <DataRow py={2} left={<FormattedMessage {...messages.chain} />} right={wallet.chain} />
         <DataRow py={2} left={<FormattedMessage {...messages.network} />} right={wallet.network} />
       </Box>
-      {showConnectionSettings && (
-        <Box mb={4} as="section">
-          <Text fontWeight="normal">
-            <FormattedMessage {...messages.section_connection_details} />
-          </Text>
-          <Bar mt={2} mb={4} />
-          <DataRow
-            py={2}
-            left={
-              <RowLabel
-                htmlFor="host"
-                nameMessage={messages.hostname_title}
-                descMessage={messages.hostname_description}
-              />
-            }
-            right={
-              <Input
-                field="host"
-                id="host"
-                placeholder={intl.formatMessage({
-                  ...messages.hostname_title
-                })}
-                width={300}
-                ml="auto"
-                initialValue={host}
-                justifyContent="right"
-                css={{ 'text-align': 'right' }}
-              />
-            }
-          />
-          <DataRow
-            py={2}
-            left={
-              <RowLabel
-                htmlFor="cert"
-                nameMessage={messages.cert_title}
-                descMessage={messages.cert_description}
-              />
-            }
-            right={<OpenDialogInput field="cert" name="cert" initialValue={cert} width={300} />}
-          />
-          <DataRow
-            py={2}
-            left={
-              <RowLabel
-                htmlFor="macaroon"
-                nameMessage={messages.macaroon_title}
-                descMessage={messages.macaroon_description}
-              />
-            }
-            right={
-              <OpenDialogInput
-                field="macaroon"
-                name="macaroon"
-                initialValue={macaroon}
-                width={300}
-              />
-            }
+      <Box mb={4} as="section">
+        <Text fontWeight="normal">
+          <FormattedMessage {...messages.section_connection_details} />
+        </Text>
+        <Bar mt={2} mb={4} />
+
+        {isEmbeddedConnectionString ? (
+          <LndConnectionStringEditor
+            field="lndconnectUri"
+            name="lndconnectUri"
+            hideStringMessage={<FormattedMessage {...messages.hide_connection_string} />}
+            label={intl.formatMessage({
+              ...messages.connection_string
+            })}
+            placeholder={intl.formatMessage({
+              ...messages.connection_string
+            })}
+            validateOnBlur
+            validateOnChange
+            required
           />
-        </Box>
-      )}
+        ) : (
+          <>
+            <DataRow
+              py={2}
+              left={
+                <RowLabel
+                  htmlFor="host"
+                  nameMessage={messages.hostname_title}
+                  descMessage={messages.hostname_description}
+                />
+              }
+              right={
+                <Input
+                  field="host"
+                  id="host"
+                  placeholder={intl.formatMessage({
+                    ...messages.hostname_title
+                  })}
+                  width={300}
+                  ml="auto"
+                  initialValue={host}
+                  justifyContent="right"
+                  css={{ 'text-align': 'right' }}
+                />
+              }
+            />
+            <DataRow
+              py={2}
+              left={
+                <RowLabel
+                  htmlFor="cert"
+                  nameMessage={messages.cert_title}
+                  descMessage={messages.cert_description}
+                />
+              }
+              right={<OpenDialogInput field="cert" name="cert" initialValue={cert} width={300} />}
+            />
+            <DataRow
+              py={2}
+              left={
+                <RowLabel
+                  htmlFor="macaroon"
+                  nameMessage={messages.macaroon_title}
+                  descMessage={messages.macaroon_description}
+                />
+              }
+              right={
+                <OpenDialogInput
+                  field="macaroon"
+                  name="macaroon"
+                  initialValue={macaroon}
+                  width={300}
+                />
+              }
+            />
+          </>
+        )}
+      </Box>
       <Box mb={4} as="section">
         <Text fontWeight="normal">
           <FormattedMessage {...messages.section_naming_title} />
@@ -126,7 +153,7 @@ WalletSettingsFormRemote.propTypes = {
   host: PropTypes.string.isRequired,
   cert: PropTypes.string.isRequired,
   macaroon: PropTypes.string.isRequired,
-  showConnectionSettings: PropTypes.bool.isRequired
+  isEmbeddedConnectionString: PropTypes.bool.isRequired
 }
 
 export default injectIntl(WalletSettingsFormRemote)
diff --git a/app/components/UI/LndConnectionStringEditor.js b/app/components/UI/LndConnectionStringEditor.js
@@ -28,9 +28,6 @@ function LndConnectionStringEditor({ formApi, field, hideStringMessage, ...rest
         disabled={isDisabled}
         field={field}
         rows={12}
-        validateOnBlur
-        validateOnChange
-        required
       />
       <Flex justifyContent="space-between" alignItems="center" mt={3}>
         <Flex>