feat(wallet): ability to set transaction fee on channel close

renderer/components/Channels/ChannelCloseDialog.js

@@ -6,10 +6,23 @@ import { withFieldState } from 'informed'
 import { intlShape } from '@zap/i18n'
 import Delete from 'components/Icon/Delete'
 import { Dialog, Text, Heading, Button, DialogOverlay } from 'components/UI'
-import { Checkbox, Form } from 'components/Form'
+import { Checkbox, Form, TransactionFeeInput } from 'components/Form'
 import messages from './messages'
+import {
+  TRANSACTION_SPEED_SLOW,
+  TRANSACTION_SPEED_MEDIUM,
+  TRANSACTION_SPEED_FAST,
+} from './constants'
 
-const DialogWrapper = ({ intl, isForceClose, isOpen, onClose, onCancel, csvDelay }) => {
+const DialogWrapper = ({
+  intl,
+  isForceClose,
+  isOpen,
+  lndTargetConfirmations,
+  onClose,
+  onCancel,
+  csvDelay,
+}) => {
   if (!isOpen) {
     return null
   }
@@ -45,7 +58,16 @@ const DialogWrapper = ({ intl, isForceClose, isOpen, onClose, onCancel, csvDelay
     </Flex>
   )
 
-  const handleSubmit = () => onClose(intl.formatMessage({ ...messages.close_channel_notification }))
+  const handleSubmit = ({ speed }) => {
+    const speedMap = {
+      [TRANSACTION_SPEED_SLOW]: 'slow',
+      [TRANSACTION_SPEED_MEDIUM]: 'medium',
+      [TRANSACTION_SPEED_FAST]: 'fast',
+    }
+    const speedKey = speedMap[speed]
+    const targetConf = lndTargetConfirmations[speedKey]
+    onClose(targetConf, intl.formatMessage({ ...messages.close_channel_notification }))
+  }
 
   return (
     <DialogOverlay alignItems="center" justifyContent="center">
@@ -60,6 +82,14 @@ const DialogWrapper = ({ intl, isForceClose, isOpen, onClose, onCancel, csvDelay
                 values={{ csvDelay }}
               />
             </Text>
+            <TransactionFeeInput
+              field="speed"
+              hasFee={false}
+              isQueryingFees={false}
+              label={intl.formatMessage({ ...messages.fee })}
+              lndTargetConfirmations={lndTargetConfirmations}
+              required
+            />
             {isForceClose && (
               <Checkbox
                 field={checkboxFieldName}
@@ -79,6 +109,11 @@ DialogWrapper.propTypes = {
   intl: intlShape.isRequired,
   isForceClose: PropTypes.bool.isRequired,
   isOpen: PropTypes.bool.isRequired,
+  lndTargetConfirmations: PropTypes.shape({
+    fast: PropTypes.number.isRequired,
+    medium: PropTypes.number.isRequired,
+    slow: PropTypes.number.isRequired,
+  }).isRequired,
   onCancel: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,
 }

renderer/components/Channels/ChannelCreateForm.js

@@ -27,6 +27,7 @@ import {
   TRANSACTION_SPEED_MEDIUM,
   TRANSACTION_SPEED_FAST,
 } from './constants'
+
 /**
  * Animation to handle showing/hiding the amount fields.
  */

renderer/components/Form/TransactionFeeInput.js

@@ -2,7 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { FormattedMessage } from 'react-intl'
 import { Box, Flex } from 'rebass/styled-components'
-import { withFormApi } from 'informed'
+import { useFieldState } from 'informed'
 import { CoinBig } from '@zap/utils/coin'
 import { Spinner, Text } from 'components/UI'
 import CryptoValue from 'containers/UI/CryptoValue'
@@ -42,15 +42,16 @@ const speedMessageMap = [
 
 const TransactionFeeInput = ({
   lndTargetConfirmations,
-  isQueryingFees,
-  initialValue,
+  hasFee = true,
+  isQueryingFees = false,
+  initialValue = TRANSACTION_SPEED_SLOW,
   label,
   field,
-  formApi,
   fee,
 }) => {
-  const value = formApi.getValue(field)
-  const hasFee = CoinBig(fee).isFinite()
+  const { value } = useFieldState(field)
+  const isFeeKnown = CoinBig(fee).isFinite()
+
   return (
     <Flex alignItems="center" justifyContent="space-between">
       <Box>
@@ -78,22 +79,24 @@ const TransactionFeeInput = ({
           </Flex>
         )}
 
-        {!isQueryingFees && !hasFee && <FormattedMessage {...messages.fee_unknown} />}
+        {!isQueryingFees && hasFee && !isFeeKnown && <FormattedMessage {...messages.fee_unknown} />}
 
-        {!isQueryingFees && hasFee && value && (
-          <Flex alignItems="flex-end" flexDirection="column">
+        <Flex alignItems="flex-end" flexDirection="column">
+          {!isQueryingFees && hasFee && value && (
             <Box>
               <CryptoValue value={fee} />
               <CryptoSelector mx={2} />
               <FormattedMessage {...messages.fee_per_byte} />
             </Box>
+          )}
+          {value && (
             <TransactionSpeedDesc
               color="gray"
               lndTargetConfirmations={lndTargetConfirmations}
               speed={value}
             />
-          </Flex>
-        )}
+          )}
+        </Flex>
       </Box>
     </Flex>
   )
@@ -125,7 +128,7 @@ TransactionSpeedDesc.propTypes = {
 TransactionFeeInput.propTypes = {
   fee: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   field: PropTypes.string.isRequired,
-  formApi: PropTypes.object.isRequired,
+  hasFee: PropTypes.bool,
   initialValue: PropTypes.string,
   isQueryingFees: PropTypes.bool,
   label: PropTypes.string,
@@ -136,8 +139,4 @@ TransactionFeeInput.propTypes = {
   }).isRequired,
 }
 
-TransactionFeeInput.defaultProps = {
-  initialValue: TRANSACTION_SPEED_SLOW,
-}
-
-export default withFormApi(TransactionFeeInput)
+export default TransactionFeeInput

renderer/containers/Channels/ChannelCloseDialog.js

@@ -3,6 +3,7 @@ import { ChannelCloseDialog } from 'components/Channels'
 import { closeChannel, channelsSelectors, CLOSE_CHANNEL_DIALOG_ID } from 'reducers/channels'
 import { showNotification } from 'reducers/notification'
 import { modalSelectors, closeDialog } from 'reducers/modal'
+import { settingsSelectors } from 'reducers/settings'
 
 const isForceCloseDialog = state => {
   const selectedChannel = channelsSelectors.selectedChannel(state)
@@ -18,13 +19,14 @@ const mapStateToProps = state => {
   return {
     isOpen: modalSelectors.isDialogOpen(state, CLOSE_CHANNEL_DIALOG_ID),
     isForceClose: isForceCloseDialog(state),
+    lndTargetConfirmations: settingsSelectors.currentConfig(state).lndTargetConfirmations,
     csvDelay: csvDelay(state),
   }
 }
 
 const mapDispatchToProps = dispatch => ({
-  onClose(message) {
-    dispatch(closeChannel())
+  onClose(targetConf, message) {
+    dispatch(closeChannel({ targetConf }))
     dispatch(closeDialog(CLOSE_CHANNEL_DIALOG_ID))
     dispatch(showNotification(message))
   },

renderer/reducers/channels/reducer.js

@@ -487,9 +487,11 @@ export const openChannel = data => async (dispatch, getState) => {
 /**
  * closeChannel - Close the currently selected channel.
  *
+ * @param {object} data Channel error notification
+ * @param {string|number} [data.targetConf] The target number of blocks the closure transaction should be confirmed by.
  * @returns {(dispatch:Function, getState:Function) => Promise<void>} Thunk
  */
-export const closeChannel = () => async (dispatch, getState) => {
+export const closeChannel = ({ targetConf }) => async (dispatch, getState) => {
   const selectedChannel = channelsSelectors.selectedChannel(getState())
 
   if (selectedChannel) {
@@ -507,6 +509,7 @@ export const closeChannel = () => async (dispatch, getState) => {
         },
         chanId,
         force: !active,
+        targetConf,
       })
       dispatch(pushclosechannelupdated(data))
     } catch (e) {

services/grpc/lightning.methods.js

@@ -206,6 +206,7 @@ async function closeChannel(payload = {}) {
         channelPoint: { fundingTxid, outputIndex },
         chanId,
         force,
+        targetConf,
       } = payload
       const tx = fundingTxid
         .match(/.{2}/g)
@@ -218,8 +219,9 @@ async function closeChannel(payload = {}) {
           outputIndex: Number(outputIndex),
         },
         force,
+        targetConf,
       }
-      logGrpcCmd('Lightning.closeChannel', payload)
+      logGrpcCmd('Lightning.closeChannel', req)
       const call = this.service.closeChannel(req)
 
       call.on('data', data => {