feat(ui): add sign message capability

resolves LN-Zap#2023

renderer/components/Profile/PaneSignMessage/PaneSignMessage.js

@@ -1,33 +1,36 @@
 import React, { useState, useRef } from 'react'
 import PropTypes from 'prop-types'
-import { grpc } from 'workers'
 import { FormattedMessage, injectIntl, intlShape } from 'react-intl'
 import { Box, Flex } from 'rebass'
-import { Bar, CopyBox, DataRow, TextArea, Text, Form, Button } from 'components/UI'
+import { grpc } from 'workers'
+import { Bar, CopyBox, TextArea, Text, Form, Button } from 'components/UI'
 import messages from './messages'
 
 const ProfilePaneNodeInfo = ({ intl, showNotification, ...rest }) => {
   const [sig, setSig] = useState(null)
+
   const formApiRef = useRef(null)
   const notifyOfCopy = () =>
     showNotification(intl.formatMessage({ ...messages.sig_copied_notification_description }))
+
   const onSignMessage = async () => {
     try {
       const { current: formApi } = formApiRef
       const message = formApi.getValue('message')
       const { signature } = await grpc.services.Lightning.signMessage({ msg: Buffer.from(message) })
-
       setSig(signature)
     } catch {
-      setSig('Can not create sig')
+      setSig(intl.formatMessage({ ...messages.sign_error }))
     }
   }
+
   return (
     <Box as="section" {...rest}>
       <Form
         getApi={api => {
           formApiRef.current = api
         }}
+        onSubmit={onSignMessage}
       >
         <Flex alignItems="stretch" flexDirection="column">
           <Text fontWeight="normal">
@@ -48,7 +51,7 @@ const ProfilePaneNodeInfo = ({ intl, showNotification, ...rest }) => {
             field="message"
             spellCheck="false"
           />
-          <Button alignSelf="flex-end" mt={3} onClick={onSignMessage} variant="normal">
+          <Button alignSelf="flex-end" mt={3} type="submit" variant="normal">
             <FormattedMessage {...messages.sign_message_action} />
           </Button>
           {sig && (
@@ -73,13 +76,8 @@ const ProfilePaneNodeInfo = ({ intl, showNotification, ...rest }) => {
 }
 
 ProfilePaneNodeInfo.propTypes = {
-  activeWalletSettings: PropTypes.object.isRequired,
-  backupProvider: PropTypes.string,
-  commitString: PropTypes.string,
   intl: intlShape.isRequired,
-  nodeUriOrPubkey: PropTypes.string.isRequired,
   showNotification: PropTypes.func.isRequired,
-  versionString: PropTypes.string.isRequired,
 }
 
 export default injectIntl(ProfilePaneNodeInfo)

renderer/components/Profile/ProfileMenu/ProfileMenu.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { FormattedMessage } from 'react-intl'
 import { Menu } from 'components/UI'
-import { PANE_NODEINFO, PANE_LNDCONNECT } from '../constants'
+import { PANE_NODEINFO, PANE_LNDCONNECT, PANE_SIGNMESSAGE } from '../constants'
 import messages from './messages'
 
 const ProfileMenu = ({ group, setGroup, isLocalWallet, ...rest }) => {
@@ -18,9 +18,15 @@ const ProfileMenu = ({ group, setGroup, isLocalWallet, ...rest }) => {
     onClick: () => setGroup(PANE_LNDCONNECT),
   }
 
+  const signMessageLink = {
+    id: PANE_SIGNMESSAGE,
+    title: <FormattedMessage {...messages.sign_message_pane_connect_title} />,
+    onClick: () => setGroup(PANE_SIGNMESSAGE),
+  }
+
   // Get set of menu links based on wallet type.
-  const getLocalLinks = () => [nodeInfoLink]
-  const getRemoteLinks = () => [nodeInfoLink, connectLink]
+  const getLocalLinks = () => [nodeInfoLink, signMessageLink]
+  const getRemoteLinks = () => [nodeInfoLink, connectLink, signMessageLink]
   const items = isLocalWallet ? getLocalLinks() : getRemoteLinks()
 
   return <Menu items={items} selectedItem={group} {...rest} />

renderer/components/Profile/constants.js

@@ -1,3 +1,4 @@
 export const PANE_NODEINFO = 'nodeinfo'
 export const PANE_LNDCONNECT = 'lndconnect'
+export const PANE_SIGNMESSAGE = 'signmessage'
 export const DEFAULT_PANE = PANE_NODEINFO

renderer/containers/Profile/PaneSignMessage.js

@@ -0,0 +1,12 @@
+import { connect } from 'react-redux'
+import { showNotification } from 'reducers/notification'
+import PaneSignMessage from 'components/Profile/PaneSignMessage'
+
+const mapDispatchToProps = {
+  showNotification,
+}
+
+export default connect(
+  null,
+  mapDispatchToProps
+)(PaneSignMessage)