feat(ui): warn of potential liquidity issues when paying an invoice

LN-Zap · Aug 30, 2019 · 7e02644 · 7e02644
1 parent 5fa0e5a
commit 7e02644
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 13 deletions.
diff --git a/renderer/components/Pay/Pay.js b/renderer/components/Pay/Pay.js
@@ -32,6 +32,7 @@ class Pay extends React.Component {
       medium: PropTypes.number.isRequired,
       slow: PropTypes.number.isRequired,
     }).isRequired,
+    maxOneTimeSend: PropTypes.number.isRequired,
     mx: PropTypes.string,
     network: PropTypes.string.isRequired,
     onchainFees: PropTypes.shape({
@@ -354,6 +355,7 @@ class Pay extends React.Component {
       sendCoins,
       setRedirectPayReq,
       walletBalanceConfirmed,
+      maxOneTimeSend,
       ...rest
     } = this.props
 
@@ -400,13 +402,15 @@ class Pay extends React.Component {
               <PayPanelFooter
                 amountInSats={this.amountInSats()}
                 channelBalance={channelBalance}
+                cryptoUnit={cryptoUnit}
                 cryptoUnitName={cryptoUnitName}
                 currentStep={currentStep}
                 formState={formState}
                 invoice={invoice}
                 isLn={isLn}
                 isOnchain={isOnchain}
                 isProcessing={isProcessing}
+                maxOneTimeSend={maxOneTimeSend}
                 previousStep={this.goToPreviousStep}
                 walletBalanceConfirmed={walletBalanceConfirmed}
               />

diff --git a/renderer/components/Pay/PayPanelFooter.js b/renderer/components/Pay/PayPanelFooter.js
@@ -1,7 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Box } from 'rebass/styled-components'
-import { FormattedMessage } from 'react-intl'
+import { Flex } from 'rebass/styled-components'
+import { FormattedMessage, injectIntl } from 'react-intl'
+import { intlShape } from '@zap/i18n'
+import { convert } from '@zap/utils/btc'
 import { CryptoValue } from 'containers/UI'
 import { Message, Text } from 'components/UI'
 import messages from './messages'
@@ -61,20 +63,48 @@ const PayPanelFooter = props => {
     isProcessing,
     previousStep,
     walletBalanceConfirmed,
+    intl,
   } = props
 
+  const renderLiquidityWarning = props => {
+    const { currentStep, maxOneTimeSend, cryptoUnit, isLn, amountInSats } = props
+
+    if (currentStep !== PAY_FORM_STEPS.summary) {
+      return null
+    }
+
+    const isNotEnoughFunds = !isEnoughFunds(props)
+    const isAboveMax = isLn && amountInSats > maxOneTimeSend
+    const formattedMax = intl.formatNumber(convert('sats', cryptoUnit, maxOneTimeSend), {
+      maximumFractionDigits: 8,
+    })
+    return (
+      <Flex alignItems="center" flexDirection="column">
+        {isNotEnoughFunds ? (
+          <Message mb={2} variant="error">
+            <FormattedMessage {...messages.error_not_enough_funds} />
+          </Message>
+        ) : (
+          isAboveMax && (
+            <Message justifyContent="center" mb={2} variant="warning">
+              <FormattedMessage
+                {...messages.error_not_onetime_send_capacity}
+                values={{ capacity: formattedMax, unit: cryptoUnit }}
+              />
+            </Message>
+          )
+        )}
+      </Flex>
+    )
+  }
+
   // Determine which buttons should be visible.
   const hasBackButton = currentStep !== PAY_FORM_STEPS.address
   const hasSubmitButton = currentStep !== PAY_FORM_STEPS.address || (isOnchain || isLn)
 
   return (
-    <Box>
-      {currentStep === PAY_FORM_STEPS.summary && !hasEnoughFunds && (
-        <Message justifyContent="center" mb={2} variant="error">
-          <FormattedMessage {...messages.error_not_enough_funds} />
-        </Message>
-      )}
-
+    <Flex flexDirection="column">
+      {renderLiquidityWarning(props)}
       <PayButtons
         hasBackButton={hasBackButton}
         hasSubmitButton={hasSubmitButton}
@@ -90,7 +120,7 @@ const PayPanelFooter = props => {
       />
 
       {walletBalanceConfirmed !== null && (
-        <React.Fragment>
+        <>
           <Text fontWeight="normal" mt={3} textAlign="center">
             <FormattedMessage {...messages.current_balance} />:
           </Text>
@@ -108,15 +138,16 @@ const PayPanelFooter = props => {
             {` `}
             <FormattedMessage {...messages.in_channels} />
           </Text>
-        </React.Fragment>
+        </>
       )}
-    </Box>
+    </Flex>
   )
 }
 
 PayPanelFooter.propTypes = {
   amountInSats: PropTypes.number.isRequired,
   channelBalance: PropTypes.number.isRequired,
+  cryptoUnit: PropTypes.string.isRequired,
   cryptoUnitName: PropTypes.string.isRequired,
   currentStep: PropTypes.string.isRequired,
   formState: PropTypes.object.isRequired,
@@ -125,8 +156,9 @@ PayPanelFooter.propTypes = {
   isLn: PropTypes.bool,
   isOnchain: PropTypes.bool,
   isProcessing: PropTypes.bool,
+  maxOneTimeSend: PropTypes.number.isRequired,
   previousStep: PropTypes.func.isRequired,
   walletBalanceConfirmed: PropTypes.number.isRequired,
 }
 
-export default PayPanelFooter
+export default injectIntl(PayPanelFooter)
diff --git a/renderer/containers/Pay.js b/renderer/containers/Pay.js
@@ -4,6 +4,7 @@ import { fetchTickers, tickerSelectors } from 'reducers/ticker'
 import { setRedirectPayReq, queryFees, queryRoutes } from 'reducers/pay'
 import { balanceSelectors } from 'reducers/balance'
 import { changeFilter } from 'reducers/activity'
+import { channelsSelectors } from 'reducers/channels'
 import { sendCoins } from 'reducers/transaction'
 import { payInvoice } from 'reducers/payment'
 import { closeModal } from 'reducers/modal'
@@ -22,6 +23,7 @@ const mapStateToProps = state => ({
   redirectPayReq: state.pay.redirectPayReq,
   onchainFees: state.pay.onchainFees,
   routes: state.pay.routes,
+  maxOneTimeSend: channelsSelectors.maxOneTimeSend(state),
   walletBalanceConfirmed: balanceSelectors.walletBalanceConfirmed(state),
 })