feat(ui): ability to edit fee limit from pay summary

renderer/components/Pay/PaySummaryLightning.js

@@ -2,25 +2,37 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { Box, Flex } from 'rebass/styled-components'
 import { FormattedMessage } from 'react-intl'
-import config from 'config'
 import { CoinBig } from '@zap/utils/coin'
 import { convert } from '@zap/utils/btc'
 import { decodePayReq, getNodeAlias, getTag } from '@zap/utils/crypto'
 import BigArrowRight from 'components/Icon/BigArrowRight'
-import { Bar, DataRow, Spinner, Text, Tooltip } from 'components/UI'
+import { Bar, DataRow, Link, Spinner, Text, Tooltip } from 'components/UI'
 import { CryptoSelector, CryptoValue, FiatValue } from 'containers/UI'
 import { Truncate } from 'components/Util'
 import messages from './messages'
 
+const ConfigLink = ({ feeLimit, openModal, ...rest }) => (
+  <Link onClick={() => openModal('SETTINGS')} {...rest}>
+    {feeLimit}
+  </Link>
+)
+
+ConfigLink.propTypes = {
+  feeLimit: PropTypes.number.isRequired,
+  openModal: PropTypes.func.isRequired,
+}
+
 class PaySummaryLightning extends React.Component {
   static propTypes = {
     amount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     exactFee: PropTypes.string,
+    feeLimit: PropTypes.number,
     isPubkey: PropTypes.bool,
     isQueryingRoutes: PropTypes.bool,
     maxFee: PropTypes.string,
     minFee: PropTypes.string,
     nodes: PropTypes.array,
+    openModal: PropTypes.func.isRequired,
     payReq: PropTypes.string.isRequired,
   }
 
@@ -40,7 +52,7 @@ class PaySummaryLightning extends React.Component {
   )
 
   renderFee() {
-    const { exactFee, maxFee, minFee } = this.props
+    const { exactFee, feeLimit, maxFee, minFee, openModal } = this.props
     const hasExactFee = CoinBig(exactFee).isFinite()
     const hasMinFee = CoinBig(minFee).isFinite()
     const hasMaxFee = CoinBig(maxFee).isFinite()
@@ -72,12 +84,7 @@ class PaySummaryLightning extends React.Component {
     }
 
     if (feeMessage) {
-      return (
-        <FormattedMessage
-          {...feeMessage}
-          values={{ minFee, maxFee: hasMaxFee ? maxFee : config.payments.feeLimit }}
-        />
-      )
+      return <FormattedMessage {...feeMessage} values={{ minFee, maxFee }} />
     }
 
     return (
@@ -87,7 +94,7 @@ class PaySummaryLightning extends React.Component {
         </Tooltip>
         <FormattedMessage
           {...messages.fee_config_limit}
-          values={{ maxFee: config.payments.feeLimit }}
+          values={{ maxFee: <ConfigLink feeLimit={feeLimit} mx={1} openModal={openModal} /> }}
         />
       </Flex>
     )

renderer/components/UI/Link.js

@@ -1,8 +1,6 @@
 import React from 'react'
 import Text from './Text'
 
-const Link = props => (
-  <Text as="a" css="cursor: pointer; text-decoration: underline;" variant="link" {...props} />
-)
+const Link = props => <Text as="a" variant="link" {...props} />
 
 export default Link

renderer/containers/Pay/PaySummaryLightning.js

@@ -1,12 +1,19 @@
 import { connect } from 'react-redux'
 import PaySummaryLightning from 'components/Pay/PaySummaryLightning'
+import { settingsSelectors } from 'reducers/settings'
 import { tickerSelectors } from 'reducers/ticker'
 import { networkSelectors } from 'reducers/network'
+import { openModal } from 'reducers/modal'
 
 const mapStateToProps = state => ({
   cryptoUnitName: tickerSelectors.cryptoUnitName(state),
   isQueryingRoutes: state.pay.isQueryingRoutes,
   nodes: networkSelectors.nodes(state),
+  feeLimit: settingsSelectors.currentConfig(state).payments.feeLimit,
 })
 
-export default connect(mapStateToProps)(PaySummaryLightning)
+const mapDispatchToProps = {
+  openModal,
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(PaySummaryLightning)

renderer/themes/base.js

@@ -204,6 +204,13 @@ const forms = {
   },
 }
 
+const text = {
+  link: {
+    cursor: 'pointer',
+    textDecoration: 'underline',
+  },
+}
+
 const variants = {
   message: {
     success: {
@@ -270,6 +277,7 @@ export default {
   lineHeights,
   palette,
   shadows,
+  text,
   buttons,
   forms,
   variants,

test/unit/components/UI/__snapshots__/Link.spec.js.snap

@@ -2,13 +2,21 @@
 
 exports[`component.UI.Link should render correctly 1`] = `
 .c0 {
+  box-sizing: border-box;
+  margin: 0;
+  min-width: 0;
   cursor: pointer;
   -webkit-text-decoration: underline;
   text-decoration: underline;
+  color: #ffffff;
+  font-size: 13px;
+  line-height: 1.4;
 }
 
 <a
   className="c0"
+  color="primaryText"
+  fontSize="m"
 >
   Link text
 </a>