Merge pull request #232 from blockchain/fix/xlm-send-copies

fix(XLM): fixed send copies

packages/blockchain-wallet-v4-frontend/src/data/components/sendXlm/sagas.js

@@ -116,9 +116,8 @@ export default ({ coreSagas }) => {
       const currency = (yield select(
         selectors.core.settings.getCurrency
       )).getOrFail('Can not retrieve currency.')
-      // TODO: update rates to xlm ticker
       const xlmRates = (yield select(
-        selectors.core.data.bitcoin.getRates
+        selectors.core.data.xlm.getRates
       )).getOrFail('Can not retrieve stellar rates.')
       const payment = (yield select(S.getPayment)).getOrElse({})
       const effectiveBalance = prop('effectiveBalance', payment)

packages/blockchain-wallet-v4-frontend/src/modals/SendXlm/FirstStep/MaximumAmountLink/index.js

@@ -1,9 +1,9 @@
 import React from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import { FormattedMessage } from 'react-intl'
 
 import { actions } from 'data'
+import { getData } from './selectors'
 import { Link } from 'blockchain-info-components'
 
 const MaximumAmountLink = props => (
@@ -12,10 +12,7 @@ const MaximumAmountLink = props => (
     weight={300}
     onClick={props.actions.firstStepMaximumAmountClicked}
   >
-    <FormattedMessage
-      id='modals.sendxlm.maximumamountlink.maximum'
-      defaultMessage='Use maximum'
-    />
+    {`${props.effectiveBalance} XLM`}
   </Link>
 )
 
@@ -24,6 +21,6 @@ const mapDispatchToProps = dispatch => ({
 })
 
 export default connect(
-  undefined,
+  getData,
   mapDispatchToProps
 )(MaximumAmountLink)

packages/blockchain-wallet-v4-frontend/src/modals/SendXlm/FirstStep/MaximumAmountLink/selectors.js

@@ -0,0 +1,19 @@
+import { prop } from 'ramda'
+import BigNumber from 'bignumber.js'
+
+import { Exchange } from 'blockchain-wallet-v4'
+
+export const getData = (state, props) => {
+  const fee = prop('fee', props)
+  const feeXlm = Exchange.convertXlmToXlm({
+    value: fee,
+    fromUnit: 'STROOP',
+    toUnit: 'XLM'
+  }).value
+  const effectiveBalanceXlm = prop('effectiveBalanceXlm', props)
+  return {
+    effectiveBalance: new BigNumber(effectiveBalanceXlm)
+      .minus(feeXlm)
+      .toString()
+  }
+}

packages/blockchain-wallet-v4-frontend/src/modals/SendXlm/FirstStep/ModalIcon/index.js

@@ -11,7 +11,7 @@ const ModalIcon = styled(Icon)`
 `
 
 const ModalIconContainer = ({ showModal, className }) => (
-  <ModalIcon onClick={showModal} name='right-arrow' className={className} />
+  <ModalIcon onMouseDown={showModal} name='right-arrow' className={className} />
 )
 
 const mapDispatchToProps = (dispatch, props) => ({

packages/blockchain-wallet-v4-frontend/src/modals/SendXlm/FirstStep/template.success.js

@@ -31,7 +31,6 @@ import {
   balanceReserveAmount,
   invalidAmount,
   insufficientFunds,
-  maximumAmount,
   shouldError,
   shouldWarn
 } from './validation'
@@ -193,12 +192,7 @@ const FirstStep = props => {
                 component={XlmFiatConvertor}
                 error={error}
                 coin='XLM'
-                validate={[
-                  required,
-                  invalidAmount,
-                  insufficientFunds,
-                  maximumAmount
-                ]}
+                validate={[required, invalidAmount, insufficientFunds]}
               />
             </FormItem>
           </FormGroup>

packages/blockchain-wallet-v4-frontend/src/modals/SendXlm/FirstStep/validation.js

@@ -4,7 +4,6 @@ import { path, prop } from 'ramda'
 
 import { Exchange, utils } from 'blockchain-wallet-v4/src'
 import {
-  MaximumAmountMessage,
   InsufficientFundsMessage,
   InvalidAmountMessage
 } from './validationMessages'
@@ -72,10 +71,7 @@ export const balanceReserveAmount = (errors, allValues, props) => {
     toCurrency: currency,
     rates: prop('rates', props)
   }).value
-  if (
-    !utils.xlm.overflowsFullBalance(valueStroop, effectiveBalance, reserve) &&
-    utils.xlm.overflowsEffectiveBalance(valueStroop, effectiveBalance)
-  )
+  if (utils.xlm.overflowsEffectiveBalance(valueStroop, effectiveBalance))
     errors._error = {
       currency,
       message: RESERVE_ERROR,
@@ -89,20 +85,6 @@ export const balanceReserveAmount = (errors, allValues, props) => {
   return errors
 }
 
-export const maximumAmount = (value, allValues, props) => {
-  const valueXlm = prop('coin', value)
-  const valueStroop = Exchange.convertXlmToXlm({
-    value: valueXlm,
-    fromUnit: 'XLM',
-    toUnit: 'STROOP'
-  }).value
-  const effectiveBalance = prop('effectiveBalance', props)
-  const reserve = prop('reserve', props)
-  if (utils.xlm.overflowsFullBalance(valueStroop, effectiveBalance, reserve))
-    return <MaximumAmountMessage />
-  return undefined
-}
-
 export const shouldError = ({
   values,
   nextProps,

packages/blockchain-wallet-v4-frontend/src/modals/SendXlm/FirstStep/validationMessages.js

@@ -12,17 +12,6 @@ const {
   RESERVE_LEARN_MODAL
 } = model.components.sendXlm
 
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: flex-start;
-
-  > * {
-    margin: 0 0 0 2px;
-  }
-`
-
 const ErrorBanner = styled(Banner)`
   > span {
     display: none;
@@ -43,16 +32,6 @@ export const InvalidAmountMessage = () => (
   />
 )
 
-export const MaximumAmountMessage = () => (
-  <Wrapper>
-    <FormattedMessage
-      id='modals.sendxlm.maximumamountmessage'
-      defaultMessage='Not enough funds. Use'
-    />
-    <MaximumAmountLink />
-  </Wrapper>
-)
-
 export const ShouldCreateAccountMessage = props => (
   <ErrorBanner type='warning'>
     <FormattedMessage
@@ -66,11 +45,14 @@ export const ShouldCreateAccountMessage = props => (
 
 export const ReserveMessage = props => (
   <ErrorBanner type='warning'>
-    <FormattedMessage
-      id='modals.sendxlm.reservemessage'
-      defaultMessage='Insufficient balance. To maintain Stellar’s minimum balance of {reserveXlm} XLM the most that you can send is {currencySymbol}{effectiveBalanceFiat} ({effectiveBalanceXlm} XLM) minus fee.'
-      values={props}
-    />
+    <div>
+      <FormattedMessage
+        id='modals.sendxlm.usespendable'
+        defaultMessage='Use total spendable balance'
+      />
+      {': '}
+      <MaximumAmountLink {...props} />
+    </div>
     <ModalIcon modal={RESERVE_LEARN_MODAL} {...props} />
   </ErrorBanner>
 )

packages/blockchain-wallet-v4-frontend/src/modals/XlmCreateAccountLearn/index.js

@@ -65,7 +65,7 @@ class XlmCreateAccountLearn extends React.PureComponent {
           <Paragraph>
             <FormattedMessage
               id='modal.createaccountlearn.info1'
-              defaultMessage='To fund a new address, you must send enough XLM to meet the reserve requirement.'
+              defaultMessage='To submit transactions, an address must hold a minimum amount of XLM in the shared global ledger. You cannot send this XLM to other addresses. To fund a new address, you must send enough XLM to meet the reserve requirement.'
             />
           </Paragraph>
           <br />

packages/blockchain-wallet-v4-frontend/src/modals/XlmReserveLearn/index.js

@@ -1,13 +1,13 @@
 import React from 'react'
+import { compose } from 'redux'
+import { connect } from 'react-redux'
 import PropTypes from 'prop-types'
 import { FormattedMessage } from 'react-intl'
 import styled from 'styled-components'
 
-import { currencySymbolMap } from 'services/CoinifyService'
+import { getData } from './selectors'
 import modalEnhancer from 'providers/ModalEnhancer'
 import { model } from 'data'
-import { Exchange } from 'blockchain-wallet-v4/src'
-import { BigNumber } from 'bignumber.js'
 
 import {
   Modal,
@@ -52,46 +52,22 @@ const Row = styled.div`
 const Bold = styled.b`
   font-weight: 400;
 `
-
-const convertXlmToFiat = (rates, currency) => amount =>
-  Exchange.convertXlmToFiat({
-    value: amount,
-    fromUnit: 'XLM',
-    toCurrency: currency,
-    rates: rates
-  }).value
-
 class XlmCreateAccountLearn extends React.PureComponent {
   render () {
     const {
       position,
       total,
       close,
+      currencySymbol,
+      effectiveBalanceMinusFeeFiat,
+      effectiveBalanceMinusFeeXlm,
+      feeFiat,
+      feeXlm,
+      reserveFiat,
       reserveXlm,
-      rates,
-      effectiveBalanceXlm,
-      currency,
-      fee
+      totalAmountFiat,
+      totalAmountXlm
     } = this.props
-    const convertToFiat = convertXlmToFiat(rates, currency)
-    const totalAmountXlm = new BigNumber(effectiveBalanceXlm)
-      .add(reserveXlm)
-      .toString()
-    const totalAmountFiat = convertToFiat(totalAmountXlm)
-    const reserveFiat = convertToFiat(reserveXlm)
-    const feeXlm = Exchange.convertXlmToXlm({
-      value: fee,
-      fromUnit: 'STROOP',
-      toUnit: 'XLM'
-    }).value
-    const feeFiat = convertToFiat(feeXlm)
-    const effectiveBalanceMinusFeeXlm = new BigNumber(effectiveBalanceXlm)
-      .minus(feeXlm)
-      .toString()
-    const effectiveBalanceMinusFeeFiat = convertToFiat(
-      effectiveBalanceMinusFeeXlm
-    )
-    const currencySymbol = currencySymbolMap[currency]
     return (
       <Modal size='medium' position={position} total={total} closeAll={close}>
         <ModalHeader onClose={close}>
@@ -113,14 +89,14 @@ class XlmCreateAccountLearn extends React.PureComponent {
           <Paragraph>
             <FormattedMessage
               id='modal.reservelearn.info1'
-              defaultMessage='To submit transactions, an address must hold a minimum amount of XLM in the shared global ledger. You cannot send this XLM to other addresses. To fund a new address, you must send enough XLM to meet the reserve requirement.'
+              defaultMessage='Stellar requires that all Stellar accounts hold a minimum balance of Lumens, or XLM. This means you cannot send a balance out of your Stellar Wallet that would leave your Stellar Wallet with less than the minimum balance. This also means that in order to send XLM to new Stellar account, you must send enough XLM to meet the minimum balance requirement.'
             />
           </Paragraph>
           <br />
           <Paragraph>
             <FormattedMessage
               id='modal.reservelearn.info2'
-              defaultMessage='The current minimum reserve requirement is {reserveXlm} XLM; this is the cost of an address that owns no other objects in the ledger.'
+              defaultMessage='The current minimum reserve requirement is {reserveXlm} XLM.'
               values={{ reserveXlm }}
             />
           </Paragraph>
@@ -204,6 +180,9 @@ XlmCreateAccountLearn.propTypes = {
   rates: PropTypes.object.isRequired
 }
 
-export default modalEnhancer(model.components.sendXlm.RESERVE_LEARN_MODAL)(
-  XlmCreateAccountLearn
+const enhance = compose(
+  modalEnhancer(model.components.sendXlm.RESERVE_LEARN_MODAL),
+  connect(getData)
 )
+
+export default enhance(XlmCreateAccountLearn)

packages/blockchain-wallet-v4-frontend/src/modals/XlmReserveLearn/selectors.js

@@ -0,0 +1,46 @@
+import { Exchange } from 'blockchain-wallet-v4/src'
+import { BigNumber } from 'bignumber.js'
+import { currencySymbolMap } from 'services/CoinifyService'
+
+const convertXlmToFiat = (rates, currency) => amount =>
+  Exchange.convertXlmToFiat({
+    value: amount,
+    fromUnit: 'XLM',
+    toCurrency: currency,
+    rates: rates
+  }).value
+
+export const getData = (state, props) => {
+  const { reserveXlm, rates, effectiveBalanceXlm, currency, fee } = props
+  const convertToFiat = convertXlmToFiat(rates, currency)
+  const totalAmountXlm = new BigNumber(effectiveBalanceXlm)
+    .add(reserveXlm)
+    .toString()
+  const totalAmountFiat = convertToFiat(totalAmountXlm)
+  const reserveFiat = convertToFiat(reserveXlm)
+  const feeXlm = Exchange.convertXlmToXlm({
+    value: fee,
+    fromUnit: 'STROOP',
+    toUnit: 'XLM'
+  }).value
+  const feeFiat = convertToFiat(feeXlm)
+  const effectiveBalanceMinusFeeXlm = new BigNumber(effectiveBalanceXlm)
+    .minus(feeXlm)
+    .toString()
+  const effectiveBalanceMinusFeeFiat = convertToFiat(
+    effectiveBalanceMinusFeeXlm
+  )
+  const currencySymbol = currencySymbolMap[currency]
+
+  return {
+    currencySymbol,
+    effectiveBalanceMinusFeeFiat,
+    effectiveBalanceMinusFeeXlm,
+    feeFiat,
+    feeXlm,
+    reserveFiat,
+    reserveXlm,
+    totalAmountFiat,
+    totalAmountXlm
+  }
+}

packages/blockchain-wallet-v4/src/redux/common/xlm/selectors.js

@@ -45,7 +45,6 @@ export const getAccountsInfo = state => {
 }
 
 // getWalletTransactions :: state -> Remote([ProcessedTx])
-// TODO: get xlm transactions
 export const getWalletTransactions = createDeepEqualSelector(
   [getAccounts, getLockboxXlmAccounts, getTransactions, getXlmTxNotes],
   (accountsR, lockboxAccountsR, pages, txNotesR) => {