feature(sendcoins): use formSelectors to determine whether a user is using LN or onchain

app/reducers/form.js

@@ -1,3 +1,5 @@
+import { createSelector } from 'reselect'
+
 // Initial State
 const initialState = {
   modalOpen: false,
@@ -94,6 +96,25 @@ const ACTION_HANDLERS = {
   [RESET_FORM]: () => (initialState)
 }
 
+// ------------------------------------
+// Selector
+// ------------------------------------
+const formSelectors = {}
+const paymentRequestSelector = state => state.form.payment_request
+const paymentTypeSelector = state => state.form.paymentType
+
+formSelectors.isOnchain = createSelector(
+  paymentRequestSelector,
+  paymentRequest => paymentRequest.length === 42
+)
+
+formSelectors.isLn = createSelector(
+  paymentRequestSelector,
+  paymentRequest => paymentRequest.length === 124
+)
+
+export { formSelectors }
+
 // ------------------------------------
 // Reducer
 // ------------------------------------

app/routes/app/components/App.js

@@ -33,6 +33,8 @@ class App extends Component {
       payInvoice,
       fetchInvoice,
       currentTicker,
+      isOnchain,
+      isLn,
       children
     } = this.props
 
@@ -58,6 +60,8 @@ class App extends Component {
           fetchInvoice={fetchInvoice}
           formInvoice={formInvoice}
           currentTicker={currentTicker}
+          isOnchain={isOnchain}
+          isLn={isLn}
         />
         <Nav
           ticker={ticker}
@@ -95,6 +99,8 @@ App.propTypes = {
   fetchInvoice: PropTypes.func.isRequired,
   fetchInfo: PropTypes.func.isRequired,
   currentTicker: PropTypes.object,
+  isOnchain: PropTypes.bool.isRequired,
+  isLn: PropTypes.bool.isRequired,
   children: PropTypes.object.isRequired
 }
 

app/routes/app/components/components/Form/Form.js

@@ -21,8 +21,11 @@ const Form = ({
   payInvoice,
   fetchInvoice,
   formInvoice,
-  currentTicker
+  currentTicker,
+  isOnchain,
+  isLn
 }) => {
+
   return (
     <div className={`${styles.formContainer} ${isOpen ? styles.open : ''}`}>
       <div className={styles.container}>
@@ -45,6 +48,8 @@ const Form = ({
                 currency={currency}
                 crypto={crypto}
                 close={close}
+                isOnchain={isOnchain}
+                isLn={isLn}
               />
               :
               <Request
@@ -81,7 +86,9 @@ Form.propTypes = {
   payInvoice: PropTypes.func.isRequired,
   fetchInvoice: PropTypes.func.isRequired,
   formInvoice: PropTypes.object.isRequired,
-  currentTicker: PropTypes.object.isRequired
+  currentTicker: PropTypes.object.isRequired,
+  isOnchain: PropTypes.bool.isRequired,
+  isLn: PropTypes.bool.isRequired
 }
 
 export default Form

app/routes/app/components/components/Form/components/Pay/Pay.js

@@ -6,8 +6,11 @@ import { btc } from '../../../../../../../utils'
 import styles from './Pay.scss'
 
 class Pay extends Component {
-  componentDidUpdate() {
-    if (this.props.paymentType !== 'lnd') { this.amountInput.focus() }
+  componentDidUpdate(prevProps) {
+    const { isOnchain, isLn, fetchInvoice, payment_request } = this.props
+
+    if (isOnchain) { this.amountInput.focus() }
+    if ((prevProps.payment_request !== payment_request) && isLn) { fetchInvoice(payment_request) }
   }
 
   render() {
@@ -23,26 +26,17 @@ class Pay extends Component {
       payInvoice,
       currency,
       crypto,
-      close
+      close,
+      isOnchain,
+      isLn
     } = this.props
     const payClicked = () => {
-      if (payment_request.length !== 124) { return }
+      if (!isOnchain || !isLn) { return }
 
-      payInvoice(payment_request)
+      // if (isOnchain) { sendcoins() }
+      if (isLn) { payInvoice(payment_request) }
       close()
     }
-
-    const paymentRequestOnChange = payreq => {
-      setPaymentRequest(payreq)
-      if (payreq.length === 124) {
-        setPaymentType('ln')
-        fetchInvoice(payreq) 
-      } else if (payreq.length === 42) {
-        setPaymentType('onchain')
-      } else {
-        setPaymentType('')
-      }
-    }
     
     const calculateAmount = value => (currency === 'usd' ? btc.satoshisToUsd(value, currentTicker.price_usd) : btc.satoshisToBtc(value))
 
@@ -57,62 +51,62 @@ class Pay extends Component {
             ref={(input) => this.amountInput = input}
             size=''
             style={
-              paymentType === 'ln' ?
+              isLn ?
                 { width: '75%', fontSize: '85px' }
                 :
                 { width: `${onchainAmount.length > 1 ? (onchainAmount.length * 15) - 5 : 25}%`, fontSize: `${190 - (onchainAmount.length ** 2)}px` }
             }
-            value={paymentType === 'ln' ? calculateAmount(invoiceAmount) : onchainAmount}
+            value={isLn ? calculateAmount(invoiceAmount) : onchainAmount}
             onChange={event => setOnchainAmount(event.target.value)}
             id='amount'
-            readOnly={paymentType === 'ln'}
+            readOnly={isLn}
           />
         </section>
         <div className={styles.inputContainer}>
           <div className={styles.info}>
             {(() => {
-              switch(paymentType) {
-                case 'onchain':
-                  return (
-                    <span>{`You're about to send ${onchainAmount} on-chain which should take around 10 minutes`}</span>
-                  )
-                case 'ln':
-                  return (
-                    <span>{`You're about to send ${calculateAmount(invoiceAmount)} over the Lightning Network which will be instant`}</span>
-                  )
-                default:
-                  return null
+              if (isOnchain) {
+                return (
+                  <span>{`You're about to send ${onchainAmount} on-chain which should take around 10 minutes`}</span>
+                )
+              } else if (isLn) {
+                return (
+                  <span>{`You're about to send ${calculateAmount(invoiceAmount)} over the Lightning Network which will be instant`}</span>
+                )
+              } else {
+                return null
               }
             })()}
           </div>
           <aside className={styles.paymentIcon}>
             {(() => {
-              switch(paymentType) {
-                case 'onchain':
-                  return (
-                    <i>
-                      <span>on-chain</span>
-                      <FaChain />
-                    </i>
-                  )
-                case 'ln':
-                  return (
-                    <i>
-                      <span>lightning network</span>
-                      <FaBolt />
-                    </i>
-                  )
-                default:
-                  return null
+              if (isOnchain) {
+                return (
+                  <i>
+                    <span>on-chain</span>
+                    <FaChain />
+                  </i>
+                )
+              } else if (isLn) {
+                return (
+                  <i>
+                    <span>lightning network</span>
+                    <FaBolt />
+                  </i>
+                )
+              } else {
+                return null
               }
             })()}
+            {
+            }
           </aside>
           <section className={styles.input}>
             <input
               type='text'
               placeholder='Payment request or bitcoin address'
               value={payment_request}
-              onChange={event => paymentRequestOnChange(event.target.value)}
+              onChange={event => setPaymentRequest(event.target.value)}
               id='paymentRequest'
             />
           </section>
@@ -138,7 +132,9 @@ Pay.propTypes = {
   payInvoice: PropTypes.func.isRequired,
   currency: PropTypes.string.isRequired,
   crypto: PropTypes.string.isRequired,
-  close: PropTypes.func.isRequired
+  close: PropTypes.func.isRequired,
+  isOnchain: PropTypes.bool.isRequired,
+  isLn: PropTypes.bool.isRequired
 }
 
 export default Pay

app/routes/app/components/components/Form/components/Pay/Pay.scss

@@ -15,7 +15,7 @@
   justify-content: center;
   min-height: 120px;
   margin-bottom: 20px;
-  transition: all 0.25s;
+  min-height: 175px;
 
   &.ln {
     opacity: 0.75;
@@ -57,7 +57,6 @@
   width: 100%;
   padding: 40px 0;
   cursor: pointer;
-  transition: all 0.25s;
 
   .info {
     margin-bottom: 10px;

app/routes/app/containers/AppContainer.js

@@ -13,7 +13,8 @@ import {
   setOnchainAmount,
   setMessage,
   setPubkey,
-  setPaymentRequest
+  setPaymentRequest,
+  formSelectors
 } from '../../../reducers/form'
 
 const mapDispatchToProps = {
@@ -41,7 +42,9 @@ const mapStateToProps = state => ({
   form: state.form,
   invoice: state.invoice,
 
-  currentTicker: tickerSelectors.currentTicker(state)
+  currentTicker: tickerSelectors.currentTicker(state),
+  isOnchain: formSelectors.isOnchain(state),
+  isLn: formSelectors.isLn(state)
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(App)